Pros & Cons Tailwind
Answered
Erlandsson posted this in #help-forum
Hello! I recently started learning NextJS because I want to move from using express-handlebars. I have looked into using Tailwind CSS a little and I wonder what the pros and cons of using it are.
I feel like there are no pros personally. I would say that I am very fast at writing "regular CSS" so it woudln't really change the my productivity. I would honestly say it slows me down. Just because I am so used to using classes and I cant use that with Tailwind.
My only reason to use Tailwind instead would be if it made a big increase in performance.
I would still need to use Tailwind for some libraries like NextUI.
Thanks in advance!
I feel like there are no pros personally. I would say that I am very fast at writing "regular CSS" so it woudln't really change the my productivity. I would honestly say it slows me down. Just because I am so used to using classes and I cant use that with Tailwind.
My only reason to use Tailwind instead would be if it made a big increase in performance.
I would still need to use Tailwind for some libraries like NextUI.
Thanks in advance!
Answered by declspecl
in my opinion,
pros:
- massive ecosystem
- quick and easy to learn/use
- clean and easy to read
- css-in-code is easy to debug and quickly change
- highly customizable with the config file
- keeps you to your predefined design system
cons:
- can get messy when a lot of logic is applied (that can't be abstracted away with variants)
- really annoying to use for multi-value css properties that you haven't made into a config class (gradients, shadows, etc)
- ONLY good in component-based projects. seriously. if you go to vanilla html, do not use tailwind
- need to use a variety of (sometimes runtime expensive) packages to fix some of tailwind's shortcomings
pros:
- massive ecosystem
- quick and easy to learn/use
- clean and easy to read
- css-in-code is easy to debug and quickly change
- highly customizable with the config file
- keeps you to your predefined design system
cons:
- can get messy when a lot of logic is applied (that can't be abstracted away with variants)
- really annoying to use for multi-value css properties that you haven't made into a config class (gradients, shadows, etc)
- ONLY good in component-based projects. seriously. if you go to vanilla html, do not use tailwind
- need to use a variety of (sometimes runtime expensive) packages to fix some of tailwind's shortcomings
8 Replies
Brown bear
Pros is it will greatly reduce duplicate code as you build the css using preexisting utility classes.
Cons is it can get very messy on larger components, but you can use packages like clsx to make it neater or abstract repeated code into its own component.
Cons is it can get very messy on larger components, but you can use packages like clsx to make it neater or abstract repeated code into its own component.
@Erlandsson Hello! I recently started learning NextJS because I want to move from using express-handlebars. I have looked into using Tailwind CSS a little and I wonder what the pros and cons of using it are.
I feel like there are no pros personally. I would say that I am very fast at writing "regular CSS" so it woudln't really change the my productivity. I would honestly say it slows me down. Just because I am so used to using classes and I cant use that with Tailwind.
My only reason to use Tailwind instead would be if it made a big increase in performance.
I would still need to use Tailwind for some libraries like NextUI.
Thanks in advance!
in my opinion,
pros:
- massive ecosystem
- quick and easy to learn/use
- clean and easy to read
- css-in-code is easy to debug and quickly change
- highly customizable with the config file
- keeps you to your predefined design system
cons:
- can get messy when a lot of logic is applied (that can't be abstracted away with variants)
- really annoying to use for multi-value css properties that you haven't made into a config class (gradients, shadows, etc)
- ONLY good in component-based projects. seriously. if you go to vanilla html, do not use tailwind
- need to use a variety of (sometimes runtime expensive) packages to fix some of tailwind's shortcomings
pros:
- massive ecosystem
- quick and easy to learn/use
- clean and easy to read
- css-in-code is easy to debug and quickly change
- highly customizable with the config file
- keeps you to your predefined design system
cons:
- can get messy when a lot of logic is applied (that can't be abstracted away with variants)
- really annoying to use for multi-value css properties that you haven't made into a config class (gradients, shadows, etc)
- ONLY good in component-based projects. seriously. if you go to vanilla html, do not use tailwind
- need to use a variety of (sometimes runtime expensive) packages to fix some of tailwind's shortcomings
Answer
it's always worth giving something a fair trial, so give it a shot, you're not getting married to it
as for the performance aspect, it might slightly increase performance but not by any significant amount. its a dev dependency, so its purely compile time, but the reusage of classes is something browsers like and tend to optimize towards
Alright, thank you very much for the inputs! I will definitely give it a try and if I don't like it I will probably go with scss
Barn Swallow
I know this has already been marked as solved, but as someone who has been using TW for years now and at the beginning thought it was a giant waste of time, I wouldn't use a project without it at this point. The speed of development and iteration for me really excellent, plus it locks me and my team into a defined design system (much of which we've customized) where I'm not having to worry about thinking about the setup of the code, and I'm just building the components of a page.
You definitely have to put stake into it though. Most people who move to TW, as I've seen, don't instantly fall in love with it, because it's a different paradigm from SCSS or whatever else. It takes some time to get into a good flow and really appreciate what it brings to the table.
You definitely have to put stake into it though. Most people who move to TW, as I've seen, don't instantly fall in love with it, because it's a different paradigm from SCSS or whatever else. It takes some time to get into a good flow and really appreciate what it brings to the table.
Yeah alright. Right now I just feel like it would be more work configuring it and then not being able to use classes like I said would give me more work. Sure, it might make it a little faster. But I have never felt like the css part of my projects are the hardest/longest. I’ve also never had any issues with classes colliding etc. But yes I will give it a fair shot and see if I start to like it more
And then if I were to not like it. Is it a good idea to use “page.module.css†files so that they aren’t “global�
And then if I were to not like it. Is it a good idea to use “page.module.css†files so that they aren’t “global�
Barn Swallow
Yeah avoid global for most stuff, CSS modules for components and sometimes pages