Using Tailwind despite criticism
TLDR; #
Vanilla CSS first, css frameworks second. Always! Because CSS is evolving…
I use tailwind because at last many people gathered to speak one "style language" all together. It's bad language though… but still a unified one!
Going from React and React based framework now each project is spelled with Tailwind in it. And for a long time!
I need to figure it out why and what actual problem is it solving in practice. For now, it's the fact that things gather into unified way to speak of css
Ride the wave, don't fight it! Don't like tailwind, use it to retrieve styles done by others for your rapid development!
Richfull amount of text on the subject… #
How many ways are there to build css? How many ways new projects were built with which pattern of developing css? I don't see much of mui, bootstrap, custom sass/less/whatever design systems when startups are growwing with new libs and tooling availabile in the Front End hype train.
Now it's with tailwind. It was fun to look at it, but the audience took it straight up and up!
How many tools where build around it? I might write here some of them. But lets start of with…:
- https://ui.shadcn.com a CLI to copy paste UI into your React project
- https://tailwindui.com you buy once and save ton of time when building ton of UI and pages
- https://flowbite.com/docs/getting-started/introduction/ the one more guys willing to catch up the financial model from above. Why worth? save a time for hand making the similar design crafted carefully by the others and which is easy to tweak.
- https://tailwind-elements.com/ same as above but totally free!
So what's the difference? I didn't see so much solutions in same "design mood" from so many sources! Just CSS. What left is just to have a way to reduce list of class names into css files and begone with it. I find it interesting and just htis speaks very compeling to me.
Would I go for advertising it to my existing project? IDK! Maybe… Thing picked shouldn't not spoil fun during working days, and we should be happy to work where we are, are not we? So if people are good with the tool and using it with benefits, then it's fine.
If people see it bad, we can do the other way around… For sake of rapid prototyping:
- Go to https://www.vanillabreeze.dev/ or https://tailwind-to-css.vercel.app/ to convert
tailwind(html)>html+cssand use in many other places. - Or just start a tailwind project with variable setup close to the target project, use tailwind html stuff there and gather all the styles for your other project… It requires some mastery of tailwind in order to leverage this way of doing things. There is an email builder https://maizzle.com/ to do this for you.
- Chrome Dev Tools => Elements => Right-click on target DOM => "copy styles"
- Use any other tools which you can find to copy selected DOM node with the childrens in it
What left is… Make sure that you are doing better job and have a great benefit of it, because maybe it would be just easier to go with tailwind
Summary #
Tailwind is "bad", bad in a sense that it removes people to write actual CSS code. You need to write pure CSS code because web is evolving and tooling is staying behind. With CSS is a very true state, for example :has() - u don't have this in tailwind. Or control look of a component with speicifc css vars…
Tailwind is "good", good because utility classes are helpfull indead. Utility classes saves time, add screen reader only or make a quick grid os do some basic magic… It's easy to do it with utilities.
Truth is in a middle, use combination of both. Write CSS first and help yourself with some tailwind. No need to reinvent utility classes!