DEV Community

Cover image for Start Using Tailwind CSS Right Now
Shubham Patil
Shubham Patil

Posted on

Start Using Tailwind CSS Right Now

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;
}
Enter fullscreen mode Exit fullscreen mode

and then your HTML would look like so:

<div class="element">
    ...
</div>
Enter fullscreen mode Exit fullscreen mode

But, with Tailwind CSS, those lines of CSS get incorporated into the class of the HTML element, like so:

<div class="mt-16">
    ...
</div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

List of Tailwind Colors

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:
Tailwind Blue

And then this is CSS's most vibrant blue:
CSS 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>
Enter fullscreen mode Exit fullscreen mode

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:
Breakpoint measures

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>
Enter fullscreen mode Exit fullscreen mode

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:
Spaghetti HTML

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>
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

and your button would look like:

<button class="button"> ... </button>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (52)

Collapse
punyflash profile image
Dmytro Morozov

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.

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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.

Collapse
ivanjeremic profile image
Ivan Jeremic

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.

Collapse
lil5 profile image
Lucian I. Last

Once it done - no one will be able to add changes to it.

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?

Collapse
shubhampatilsd profile image
Shubham Patil Author

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!

Collapse
hudsonxp80 profile image
hudsonxp80

You can still extract components which is very similar to writing css class but much simpler.

Collapse
andycharles6 profile image
andycharles6

Why no one will be able to add changes?

Collapse
mentoraliu profile image
Mentori

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

Collapse
darkwiiplayer profile image
DarkWiiPlayer

The colors that Tailwind offers are not just CSS colors with fancy names, they are much more appealing.

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.

Collapse
lil5 profile image
Lucian I. Last

I suggest you read a little bit into the documentation concerning 'tailwind.config.js'

tailwindcss.com/docs/configuration

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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.

Thread Thread
lil5 profile image
Lucian I. Last

Because naming is hard, less names written less time lost on frivolous names.

Thread Thread
darkwiiplayer profile image
DarkWiiPlayer

Naming is only hard when you're not really sure what it is you're naming

Thread Thread
eternalmoon1234 profile image
Gautam

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.

Collapse
victorocna profile image
Victor Ocnarescu

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 container class 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-bio or .button, but in 95% of the cases we use tailwind. An extraordinary CSS framework that works great for teams.

Collapse
camcodirect profile image
John Pia

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.

Collapse
collimarco profile image
Marco Colli

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 @apply then you can just use normal CSS that will be supported forever, unlike frameworks.

Collapse
dcruz1990 profile image
Dennis Quesada Cruz

Kindly disagree, its depends on how you organize your styles, if you have strong directives in your team, everything should flow normally.

Collapse
facundocorradini profile image
Facundo Corradini • Edited on

"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: #1D4ED8 in 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.

Collapse
adrian154 profile image
adrian

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

Collapse
eternalmoon1234 profile image
Gautam

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.

Collapse
mentoraliu profile image
Mentori

I mainly use Bootstrap for the time saving responsiveness, have you used bootstrap and how does it compare to tailwind ?

Collapse
eternalmoon1234 profile image
Gautam

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.

Thread Thread
mentoraliu profile image
Mentori

can you combine bootstrap with tailwind, and get best of both worlds? lets say bootstrap for responsiveness and tailwind for styling

Collapse
andycharles6 profile image
andycharles6

There is no thing called CSS colors. Its a hex code that you write to get colors

Collapse
shubhampatilsd profile image
Shubham Patil Author

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!

Collapse
andycharles6 profile image
andycharles6

What are the base colors CSS offers?

Thread Thread
shubhampatilsd profile image
Shubham Patil Author

Like the colors such as blue and red

Thread Thread
andycharles6 profile image
andycharles6 • Edited on

Those 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

Thread Thread
shubhampatilsd profile image
Shubham Patil Author

yes but those color palettes require extra steps to setup, while Tailwind offers a great selection out of the box.

Thread Thread
andycharles6 profile image
andycharles6

What extra steps does it require? Copy/Paste from a website?

From that logic, TailwindCSS requires extra installation step too

Collapse
kolja profile image
Kolja

Yesterday I used Tailwind for the first time and am trying to understand more of the principle of run dev and run 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).

Collapse
hlship profile image
Howard M. Lewis Ship • Edited on

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.

Collapse
mike_andreuzza profile image
Michael Andreuzza

not even Adam Watham recommends to use @apply.. .

Collapse
opensas profile image
opensas

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?

Collapse
mike_andreuzza profile image
Michael Andreuzza
Thread Thread
opensas profile image
opensas

thanks! I guess this should also appear in tailwind's doc.

Thread Thread
mike_andreuzza profile image
Michael Andreuzza

haven't seen it...

Thread Thread
opensas profile image
opensas

I mean, it's not in the docs, but it should be.

Collapse
ddiatlov profile image
Dimitry Diatlov

"The colors that Tailwind offers are not just CSS colors with fancy names, they are much more appealing."

You can always put the same HEX coded color into CSS and you'll get the same result. It has nothing to do with color.

Collapse
shubhampatilsd profile image
Shubham Patil Author

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

Collapse
acidlake profile image
Jeremias Nunez

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.

Collapse
lil5 profile image
Lucian I. Last

Great post, I am always surprised of the pushback tailwindcss receives.

Collapse
thepeoplesbourgeois profile image
Josh

Protanopia-haver here: Just wanted to say that all of the swatches for Indigo and Purple are 100% identical to the swatches for Blue to my dumb, bad-at-seeing-red eyes.

Collapse
alexkarpen profile image
alexkarpen • Edited on

Tailwind is perfect for team projects. I read that some people say it is for personal projects only. Web development now is component based that's why tailwind is perfect. Tailwind cannot replace CSS it's an accelerator to write fast CSS that you already know.
Everything i say is up for debate.

Collapse
sanspapyrus683 profile image
SansPapyrus683

oh my god hi shubham

Collapse
shubhampatilsd profile image
Shubham Patil Author

hello there!

Collapse
dcruz1990 profile image
Dennis Quesada Cruz

As others have said, i kindly disagree that it replace plain CSS, Tailwind is a utility tool, its output, in the end,goes to plain CSS.

Collapse
shubhampatilsd profile image
Shubham Patil Author

True but I feel like it makes writing CSS faster and easier to style

Collapse
mhmoudalaskalany profile image
Mahmoud Alaskalany

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

Collapse
shubhampatilsd profile image
Shubham Patil Author

Hello everyone so now I have a Twitter. It would be awesome if you could follow me at twitter.com/ShubhamPatilsd!

Collapse
xdabier profile image
Xdabier

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!