I've been using Tailwind CSS for the past 4 months now, and I can confidently say that it's much much MUCH better than plain CSS.
If you didn't know, Tailwind CSS basically provides utility classes that can be used to style your HTML. Think of it as Bootstrap but with much more freedom. Instead of being stuck to a certain design, Tailwind CSS gives you the ability to make your own. Although it does have a design system, it is pretty subtle compared to Bootstrap, while saving you time from creating a design system from scratch like with plain old CSS.
You might be confused so let me give you an example. To create a 4rem margin above your element in CSS, you would do
.element{
margin-top: 4rem;
}
and then your HTML would look like so:
<div class="element">
...
</div>
But, with Tailwind CSS, those lines of CSS get incorporated into the class of the HTML element, like so:
<div class="mt-16">
...
</div>
Here, the mt-16 stands for margin-top: 4rem.
This leads me to my first point: creating an entire design system (including spacing and classes) can be very time-consuming and unproductive. Tailwind CSS provides a solution to this problem by providing spacing, color, responsive and basic animation classes, that act as substitute for actual CSS.
For example, for spinning animation, all you need is the class name animate-spin. The implementation for that would be:
<div class="animate-spin">
...
</div>
and you have a spinning element now!
The color system Tailwind has is fantastic for small projects in which you don't want to create a color scheme.
The colors that Tailwind offers are not just CSS colors with fancy names, they are much more appealing.
This is Tailwind's most vibrant blue:
And then this is CSS's most vibrant blue:
It is noticeable that Tailwind's colors are much more soothing and are less harsh than the base CSS colors.
Tailwind also has a variety of other classes that shorten the amount of styling you need to write. For example, pseudo-selectors like hover:, are basically condensed into
<div class="hover:whatever-you-want-to-do-on-hover">
...
</div>
Tailwind also has a bit of sorcery when it comes to responsive layout. Tailwind uses pre-set (by default) pixel values for certain breakpoints. For example, there is an sm breakpoint which is a screen width of 640px. If you're confused, just think of these breakpoints as media queries in CSS.
To use these breakpoints, just use breakpointName:. The breakpointName is one of the values below:
Say that you wanted to hide a div on smaller screens for a responsive layout and have it shown as flex on screens bigger than 768px.
<div class="hidden md:flex">
...
</div>
In the HTML above, it basically says to "Hide everything below the md breakpoint, and everything above the md breakpoint should be shown as flex". (In this case, flex = display: flex; in normal CSS).
Tailwind also has a lot customization options. Just hop into the tailwind.config.js and you have a bunch of options to customize breakpoints and other colors and stuff.
However, Tailwind is not without its weak points. First let's talk about how bloated the code looks after applying these styles.
Just take a look at this:
If you wanted four buttons, you would have to do something like:
<button class="bg-blue rounded-md shadow-md px-2 py-1">
...
</button>
<button class="bg-blue rounded-md shadow-md px-2 py-1">
...
</button>
<button class="bg-blue rounded-md shadow-md px-2 py-1">
...
</button>
<button class="bg-blue rounded-md shadow-md px-2 py-1">
...
</button>
Pretty repetitive right? Well, this can be solved if you use a JavaScript framework that supports the creation of components, like React, Vue, Angular, and Svelte (which is loved by a lot of developers due to its simplicity).
Another option to shorten the class name is to use @apply in the accompanying CSS file that Tailwind needs to apply the styles. More information about the applying concept can be found on their website
The same example of that button class name would be condensed to
.button{
@apply bg-blue rounded-md shadow-md px-2 py-1
}
and your button would look like:
<button class="button"> ... </button>
After a while, Tailwind becomes second nature, and you start to know exactly what to type out. This can be challenging to you if you're new to Tailwind as you think you have to memorize all the classes. Don't do this to yourself; it's like subconsciously knowing the class for the job. After a while, you simply gain the sense of which utilities to use and when to use them. Also, if you need any help, Tailwind's website is always there to assist you.
If you're interested, check out https://tailwindcss.com/docs/installation to view the documentation on setting it up with frameworks like NextJS and even CDN through your HTML.
That's all about Tailwind! As I've stated before, do check the website for more help on specific topics like, for example, CSS grid and other utilities. If you enjoyed this post, there are 3 buttons on the left side of this article for your clicking pleasure and a comment section awaiting your input. If you didn't like this article, those buttons are still open, ready to be clicked 🙃.
Oldest comments (51)
oh my god hi shubham
hello there!
This really seems like some heavy mental gymnastics to argue against vanilla CSS. In reality, CSS gives you a multitude of tools to define the colours you want for your design, whereas frameworks like tailwind only provide a very limited palette of pre-built colours.
I suggest you read a little bit into the documentation concerning 'tailwind.config.js'
tailwindcss.com/docs/configuration
The mental gymnastics continues. I just don't get why people are so opposed to simply learning CSS instead of finding all these excuses to dump all of the styling in the markdown like it's 1990 or something.
Because naming is hard, less names written less time lost on frivolous names.
Naming is only hard when you're not really sure what it is you're naming
Learning CSS first is obviously a necessity, however Tailwind can help in writing frontend much faster. When using plain CSS, I've found that I am much less productive, spending time switching between files and editing. Tailwind can look pretty messy, but if your team knows it, I've found that it speeds up writing frontend very significantly.
It's just last night I started a new client's project using Angular + tailwind, and I can confirm that I am loving the experience so far!
I highly disagree that tailwind is better then plain CSS. The one line long strings was never good to work with in a long term. Tailwind just gives freedom for developers to write an unsupportable designs. Once it done - no one will be able to add changes to it. For personal projects it is fine, but never use tailwind when you working in team.
Why no one will be able to add changes?
Frameworks like tailwind have their place in prototyping, specially by people who don't know and don't want to learn CSS, like backend people that just want a quick front-end for their application, or front-end people that specialize more on the javascript side.
The problem is that tailwind specifically moves away from those use-cases by not providing finished styles for certain components like "buttons" or "grids" but instead tries to provide a direct mapping from classes to css attributes, thereby offering the advantages of neither approach.
I think even tailwind is for backend people to much the would use something like bootstrap which has already a design. With tailwind backend people would be as fast as with css.
That seems like a strange prognosis, for example: say a class is created 'button' and then with the apply function certain tailwind classes are added, how difficult would it be to remove the class 'mb-2' (from \@apply) and add a newly created class 'mb-7-px'?
How readable is the class mb-7-px?
Is it really that difficult or is it just different?
Hi I'm the author of the article here! Tailwind definitely has its own advantages. One thing I might have left out is the customization that CSS offers. My main goal was to outline how Tailwind might be good in cases where you want to write CSS much faster and efficiently. CSS does offer more flexibility, but when you get used to it, it becomes very readable. I do like custom CSS in some cases (eg. customization and certain pseudo selectors) but Tailwind makes styling stuff really fast. I wish you a good day!
You can still extract components which is very similar to writing css class but much simpler.
I mean obviously plain CSS is way more flexible but tailwind saves you lot's of time, I personally use bootstrap just for the responsiveness because I hate wasting time with media queries
not even Adam Watham recommends to use @apply.. .
I read such thing a couple times but couldn't find where he said such a thing. Do hoy have a link so I can read a bit more about it?
here.
twitter.com/adamwathan/status/1296...
thanks! I guess this should also appear in tailwind's doc.
haven't seen it...
I mean, it's not in the docs, but it should be.
There is no thing called CSS colors. Its a hex code that you write to get colors
This is true but the base colors that CSS offers (without manual input of a hex code) are harsher than Tailwind's default selections. Thanks for the input though!
What are the base colors CSS offers?
Like the colors such as
blueandredThose are shorthands to define a color and not the default colors.
Also what tailwind gives is a color palette that gets converted to css classes behind the scenes.
You can get color palettes with CSS code from many websites.
Overall, people who never have written CSS simply doesn't know what is CSS, they just see a popular library and then attempt to become a teacher by teaching wrong things and the cycle continues
yes but those color palettes require extra steps to setup, while Tailwind offers a great selection out of the box.
What extra steps does it require? Copy/Paste from a website?
From that logic, TailwindCSS requires extra installation step too
one big issue for tailwind it make project size larger and live reloading take more time
tried it with ionic and remove it it invrease the reload time by 3 or 4 seconds on my powerfull machine
I really like the design of Tailwind website and sometimes I take inspiration from their CSS code... Nothing more. IMHO Tailwind can't be used for a serious project, it creates too much pollution in the markup, it's not semantic, there's too much duplication (not DRY), and it's hard to maintain... and if you use
@applythen you can just use normal CSS that will be supported forever, unlike frameworks.Kindly disagree, its depends on how you organize your styles, if you have strong directives in your team, everything should flow normally.
I highly agree that tailwind is better than plain CSS. But where it truly shines is when the whole team uses it. When I was reviewing code in the past I always thought: what the heck does that
containerclass actually do? Now using tailwind me and my team have a common understanding of CSS right from the HTML.Sure, in some cases I still write semantic CSS like
.author-bioor.button, but in 95% of the cases we use tailwind. An extraordinary CSS framework that works great for teams.Great post, I am always surprised of the pushback tailwindcss receives.