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 🙃.
Top comments (51)
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.
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.
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!
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?
You can still extract components which is very similar to writing css class but much simpler.
Why no one will be able to add changes?
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
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.
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.Reading the comments here... The first thing I thought of is
"Front end devs argue about language vs frameworks too?"
Any dev with crossover experience knows that those who argue about language over framework, like don't have much experience as it's always an argument from a place of ignorance.
Tailwind is awesome, and doesn't replace CSS
Vanilla CSS is awesome.
Both can be true.
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.
"It is noticeable that Tailwind's colors are much more soothing and are less harsh than the base CSS colors"
What's stopping you from declaring
color: #1D4ED8in your plain CSS???Tailwind provides great pre-vetted choices, and allows you to automagically generate more in the config, which is great. But it's still an abstraction layer on top of CSS.
And one that's simply not compatible with the intersectional conditional CSS that's coming up next. Tailwind can become a huge pile of technical debt in the next two years.
Instead of fanboying over a tech we should understand what are the problems they solve and what are the tradeoffs, 'cause there's always tradeoffs.
tailwind is a contradictory premise: the flexibility it offers can only be achieved by close to 1:1 parity with the underlying css elements, but at that point they're basically glorified inline styles, which are a classical violation of the central HTML/CSS dogma (namely, separate styles and content!!). IMHO tailwind has no place in serious web development projects
Tailwind is definitely one of the best frontend tools I have used. Although the code may seem unreadable and uneditable, if you know Tailwind, it's actually very easy to read, and edit. Tailwind has helped me write frontend faster, and has saved a lot of time and switching between files.
I mainly use Bootstrap for the time saving responsiveness, have you used bootstrap and how does it compare to tailwind ?
I've used bootstrap, it's relatively good to get a website set up quickly, but you are unable to custom-style your website. On the other hand, Tailwind has a lower-level API allowing you to style your websites in any way you would like.
can you combine bootstrap with tailwind, and get best of both worlds? lets say bootstrap for responsiveness and tailwind for styling
That's true but with Tailwind there's no additional setup required for colors to use them. In CSS you would have to organize them into variables and that's another step required to use those colors in CSS. I think the meaning of color is differing from reader to reader. I meant the default colors (like
blue-400,green-200) that Tailwind gives :)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
Having just started with Tailwind on a personal project, I really like it's pragmatic approach; Tailwind is stripping away a layer of abstraction that works hard against me in trying to create and manage my layout.
Tailwind's "utility-first" approach means that you are rejecting semantic styling in favor of a very in-your-face pragmatic (if verbose, with caveats) direct description of the design, layout, and (some parts of) behavior of your elements.
This is very much inline with Simple Made Easy in my mind. I'll trade opaque abstracts for verbosity nearly every time (especially when, as here, there's a mechanism to reduce that verbosity when needed).
What isn't in the discussion so far is the Node-based tooling; tailwind can be configured to watch your source files; it picks out the class names it defines that your code actually uses, and only those go into the output CSS (which is regenerated as files change). This carries through into production, so it means that the final CSS is small.
I've definitely been in projects where the use of a CSS class name drifted from its original semantic meaning, resulting in the class being locked forever, for fear of changing something elsewhere in the app without meaning too; this certainly results in CSS bloat. I've also seen cases where the volume of semantic names was too great, so that the names became nearly meaningless.
We'll see if my mind changes as I use it more, but my sense for it is quite positive.
Yesterday I used Tailwind for the first time and am trying to understand more of the principle of
run devandrun build. Actually I thought that with TW during development all CSS properties are written as a class in the HTML tag, because it's easy and fast and during compilation everything is combined into bigger classes (as far as possible). So I was a bit disappointed after my first build and have to say that now I don't quite understand why TW is so highly praised, since it leaves tons of duplicate code in the final version of the website. From the article I now know the possibility of @apply, but that goes then already back to the "old" way. So TW is for me (until now) not much more than inline CSS with predefined colors. (but which are really nicer than the named colors from vanilla CSS).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.
Great post, our team have been using tailwind since 1 year, and is better since JIT very fast reload on build, checking the comments i must say, that people can use just css a framework or both, no need to argue that much, use whatever tool you like, what works for you, it may not work for others.
Great post, I am always surprised of the pushback tailwindcss receives.