![Cover image for Should I use Tailwind? 5 things to consider — real experience [2024]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwim88dgt752jk89kbm2l.png)
Hey, DEV.to community! In this post, I invite you to discuss whether Tailwind CSS is a viable option to use for styling in projects of any scale.
...
For further actions, you may consider blocking this person and/or reporting abuse
Forgot to mention that sometimes things works in dev mode but broken after build, because of complex class parsing internals of tailwind/bundlers.
Thinking about trying unoCSS as an alternative, it's even compatible with tailwind syntax.
Good point, thanks for sharing! Thankfully, we didn't encounter problems with broken builds.
Tailwind vendor lock-in is also something worth keeping in mind. You've mentioned unoCSS, but it certainly would be harder to remove Tailwind altogether.
We're not sure whether we'll keep using Tailwind, or move to some other solution. Thinking about a design system...
TailwindCSS is good for prototyping, not so for complex enough production apps, same as
create-react-app, nothing is more permanent than a temporary solution.Another big pain point with tailwind is to create some reusable components, many pitfalls, again because of that parsing process.
You can mitigate long classNames and make it more reusable like this:
Honestly, I never seen well organized CSS, always a mess.
This is the exact approach we're considering now - keep some of the useful stuff like
m-2orgap-x-3and apply it on the CSS level, rather than in the class list.(Although,
@applyseems to be abandoned, and we were thinking about SCSS/LESS, like this.)@apply realized via
postcss- github.com/pascalduez/postcss-apply . Everything depends on postcss.It was popular at some point, there are many postcss plugins postcss.org/docs/postcss-plugins
Ah, I see - thanks for the clarification.
Do you feel that PostCSS is declining in popularity? We've got Tailwind via PostCSS, it would be great to know if it's worth keeping around (in case we ditch Tailwind).
Yes, not sure if it can decline further, but repository still maintained,
vitesupport it for example, probably they got funded by some companies.Not sure, for me, it was faster to stick to the simplest tech stack, without keeping configs and setups for some tools.
Hmm, I see, thanks for the insights! By the way, do you prefer to use CSS directly or via SCSS/LESS?
Used SCSS mostyly, but now can nest rules in pure CSS
And hallelujah for that!
Using
@applyis explicitly discouraged by Tailwind people because it goes against their ethos. It's too like normal CSS, and if you use it you'll soon realise that all the bits Tailwind is adding are... pointless recreations of the same wheel.I like some Tailwind helpers, but also want to reuse some long classes.
Mixed impressions about Tailwind.
I don't entirely agree with this (though you make a lot of good points!) but there is an excellent short video about Tailwind by Fireship on YouTube:
Excellent breakdown of Tailwind’s pros and cons! The practical insights you shared based on real experience are incredibly helpful for developers deciding whether to adopt it. Thanks for the detailed overview! スーパーコピー
Thanks for your comment! We hope this post helps not only to decide whether to use Tailwind in a new project or not, but also if it's worth keeping the existing setup.
Hey,
Congrats on a great project! I was also considering Tailwind and I just read your post - great points, thanks. I'm leaning towards not using Tailwind again because the build bundle was huge in the last project I worked on. For my personal project I think I'll just use SCSS.
Hi, thanks for the comment! Did you try compressing your CSS assets?
Hmm, to be honest I don't know 😅 it was quite a while ago, I knew that this was a concern for the team
I doubt the large bundle size has anything to do with Tailwind itself. It already includes only the CSS you actually use. You can, of course, minify and compress the CSS for a smaller bundle size.
For number 2 issues that some extra classes you don't have in direct bundle, have to make them in configuration file or have to use arbitrary values, for that in tailwind v4, they are going to redefine this, from now on ( when It releases ), anything you want to define you can directly define in css files, no need to clutter configuration files, and also no need to use arbitrary values for most properties, cause if they do not exist in bundle then it'll he automatically be understood as arbitrary values and value will be placed accordingly
Thanks for sharing some insights into the future of Tailwind!
Is syntax going to be different? I don't quite see the difference between "new" and "old" arbitrary values. Any example would be appreciated!
Like for mx-18, it does not exist directly in main bundle, so we have to do this mx-[18], but after version4, it'll be changed to mx-18 directly like it exist,
Also by default spacing for tailwind was 0.25rem meaning 1=0.25rem, 4=4x0.25rem=1rem, but with this new update we can even specify what should be spacing, like if you want that number is equal to rem or any other custom value,
they are bringing so many new things ( new property classes ) with also more faster builds and fixing so many bugs, you can consider checking their post about v4, it'll be very helpful
Ah, I see, thanks for the explanation! Yes, that would be quite handy. Will check out their v4 post.
From my experience of building a design system from ground up, Tailwind plays well to ensure the consistency every where and never leaves room for new comers to do mistakes, we have deleted lots of css lint rules after adapting Tailwind.
With proper component abstraction we have not faced any issues so far except the quick debugging and little long class names. Its is a trade off.
And one more thing to specify: LLMs are very good at Tailwind than native css quirks so it helps a lot to generate uniform component that aids in productivity.
Thanks for the comment!
In our experience, a design system built from scratch would provide basics like Tailwind's
mt-1, maybe in a different form. I'm curious, did you build it on top of Tailwind?Yep, agree - everything is a trade-off in some way.
Radix Components + Tailwind was our stack. We choose Tailwind mainly two reason:
Recently, I started using Tailwind CSS while building a website for an agency, and I must say, it's a game-changer. Its utility-first approach makes development faster and easier since you can create custom layouts without writing much CSS. The simplicity of using predefined classes lets you focus more on the design and functionality rather than getting stuck on complex styling. Once you set up your configuration to suit your project, building a responsive and visually appealing UI becomes seamless and efficient.
If you're also exploring Tailwind CSS or need quick references, I highly recommend checking out my Tailwind CSS Cheatsheet website: cheatsheet. It's a handy resource for developers, offering a well-organized list of classes and properties to speed up your workflow.
Thanks for sharing! Do you have an approach to resolve utility class hell?
Yes, They do provide the @apply directive which is a powerful feature that allows you to combine multiple utility classes into a single custom class.
Refer - tailwindcss.com/docs/reusing-style...
This is the only case where I can see Tailwind being anything useful, and it's officially discouraged.
Tailwind's design system primitives seem to be appreciated by both sides of the discussion. (Which is not their main selling point.)
Amazing .
Thanks for the feedback!
For generating color palettes compatible with Tailwind, I recommend using the tool uicolors.app.
UI Colors is great - I've also shared a link to this app in the article. We've used it extensively for color schemes generation.
Great article! You’ve laid out some very practical considerations for anyone deciding whether to use Tailwind CSS. As someone who’s explored various tools for improving web development workflows, I’ve found Tailwind’s utility-first approach particularly helpful for fast prototyping.
Your point about balancing readability with efficiency resonates. In my experience working on projects like RemiiniAPK, Tailwind’s reusable classes have significantly sped up UI development without needing to write custom CSS repeatedly.
Nice article, we recently started using Tailwind in a small React app but it's already hard to maintain styling in the project
If you just started using Tailwind then maybe it didn't click with you yet. From my experience most people are disgusted by Tailwind at first but it really speeds things up.
The styling defaults (typography, spacing scales, etc.) are also excellent when there isn't a really well defined custom design system in place.
Wow, thanks for the insights! Are you planning to move on to something different?
Its also viable to use css modules and Tailwind, a recent project where I used tailwind for most of the styling was much more maintainable than the one I decided to use a styling framework like MUI
Thanks for sharing! Could you please share how you combine CSS Modules and Tailwind? Appreciate it!