DEV Community

Cover image for Should I use Tailwind? 5 things to consider — real experience [2024]

Should I use Tailwind? 5 things to consider — real experience [2024]

T.H. Jacobs on November 21, 2024

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. ...
Collapse
 
asmyshlyaev177 profile image
Alex

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.

Collapse
 
thj profile image
T.H. Jacobs

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...

Collapse
 
asmyshlyaev177 profile image
Alex • Edited

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:

 /* css */
  .codeTitle {
    @apply text-center text-2xl mt-2;
  }
Enter fullscreen mode Exit fullscreen mode
  <div className="codeTitle">...
Enter fullscreen mode Exit fullscreen mode

Honestly, I never seen well organized CSS, always a mess.

Thread Thread
 
thj profile image
T.H. Jacobs

like this

This is the exact approach we're considering now - keep some of the useful stuff like m-2 or gap-x-3 and apply it on the CSS level, rather than in the class list.

(Although, @apply seems to be abandoned, and we were thinking about SCSS/LESS, like this.)

Thread Thread
 
asmyshlyaev177 profile image
Alex • Edited

@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

Thread Thread
 
thj profile image
T.H. Jacobs

Ah, I see - thanks for the clarification.

It was popular at some point

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).

Thread Thread
 
asmyshlyaev177 profile image
Alex

Yes, not sure if it can decline further, but repository still maintained, vite support 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.

Thread Thread
 
thj profile image
T.H. Jacobs

Hmm, I see, thanks for the insights! By the way, do you prefer to use CSS directly or via SCSS/LESS?

Thread Thread
 
asmyshlyaev177 profile image
Alex

Used SCSS mostyly, but now can nest rules in pure CSS

.container {
  .other {}
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
riobrewster profile image
RioBrewster

And hallelujah for that!

Thread Thread
 
moopet profile image
Ben Sinclair

Using @apply is 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.

Thread Thread
 
asmyshlyaev177 profile image
Alex

I like some Tailwind helpers, but also want to reuse some long classes.
Mixed impressions about Tailwind.

Collapse
 
best_codes profile image
Best Codes

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:

Collapse
 
mark_liu_ddec33c1963a0c03 profile image
mark liu

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! スーパーコピー

Collapse
 
thj profile image
T.H. Jacobs

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.

Collapse
 
gherkin_h profile image
Gherkin H

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.

Collapse
 
thj profile image
T.H. Jacobs

Hi, thanks for the comment! Did you try compressing your CSS assets?

Collapse
 
gherkin_h profile image
Gherkin H

Hmm, to be honest I don't know 😅 it was quite a while ago, I knew that this was a concern for the team

Collapse
 
vixan profile image
Duca Vitalie-Alexandru

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.

Collapse
 
wizard798 profile image
Wizard

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

Collapse
 
thj profile image
T.H. Jacobs

Thanks for sharing some insights into the future of Tailwind!

do not exist in bundle then it'll he automatically be understood as arbitrary values

Is syntax going to be different? I don't quite see the difference between "new" and "old" arbitrary values. Any example would be appreciated!

Collapse
 
wizard798 profile image
Wizard

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

Thread Thread
 
thj profile image
T.H. Jacobs • Edited

Ah, I see, thanks for the explanation! Yes, that would be quite handy. Will check out their v4 post.

Collapse
 
saravanan_ramupillai profile image
Saravanan Ramupillai

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.

Collapse
 
thj profile image
T.H. Jacobs

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?

Its is a trade off

Yep, agree - everything is a trade-off in some way.

Collapse
 
saravanan_ramupillai profile image
Saravanan Ramupillai

Radix Components + Tailwind was our stack. We choose Tailwind mainly two reason:

  1. Codifying our design language - basically developers has left with no choice to override. Simple VSCode extension would solve this instead of running lints in every stages.
  2. Don't want to build our own version of utilities classes while there is already established one. We had detailed discussion around it. Build vs Adapt. Finally we choose Adapt for two reasons i) Don't want to introduce additional layer of learning in the code base asking developers the memorise our own conventions and classes. ii) Deciding at what level we should stop abstracting functionality for the utility class is always a challenge. Eg: utility for the single purpose like 'mt-1' or at the logical level like 'input-box-outline'
Collapse
 
hardikgohilhlr profile image
Hardik Gohil

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.

Collapse
 
thj profile image
T.H. Jacobs

Thanks for sharing! Do you have an approach to resolve utility class hell?

Collapse
 
hardikgohilhlr profile image
Hardik Gohil

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...

Thread Thread
 
moopet profile image
Ben Sinclair

This is the only case where I can see Tailwind being anything useful, and it's officially discouraged.

Thread Thread
 
thj profile image
T.H. Jacobs

Tailwind's design system primitives seem to be appreciated by both sides of the discussion. (Which is not their main selling point.)

Collapse
 
aniruddhaadak profile image
ANIRUDDHA ADAK

Amazing .

Collapse
 
thj profile image
T.H. Jacobs

Thanks for the feedback!

Collapse
 
tomasdevs profile image
Tomas Stveracek

For generating color palettes compatible with Tailwind, I recommend using the tool uicolors.app.

Collapse
 
thj profile image
T.H. Jacobs • Edited

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.

Collapse
 
funkjose profile image
Jose Funk

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.

Collapse
 
kylegor profile image
Kyle Goran

Nice article, we recently started using Tailwind in a small React app but it's already hard to maintain styling in the project

Collapse
 
vixan profile image
Duca Vitalie-Alexandru

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.

Collapse
 
thj profile image
T.H. Jacobs

Wow, thanks for the insights! Are you planning to move on to something different?

Collapse
 
dsaga profile image
Dusan Petkovic

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

Collapse
 
thj profile image
T.H. Jacobs

Thanks for sharing! Could you please share how you combine CSS Modules and Tailwind? Appreciate it!