loading...
Cover image for My first experiences with Tailwind CSS

My first experiences with Tailwind CSS

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・4 min read

Hi everyone, confession time: I had never used Tailwind CSS before this week.

And it's not the end of the world; if you work for a company, they have certain working ways. This means the products they use work for them.

It's fun to think, oh something new came out, let's all start using that, but in reality, this does not happen in companies.

So here I was missing out on everyone having so much fun with Tailwind CSS.

I did have it on my radar for quite a while, and making a recent transition to a new job brought the opportunity to start using Tailwind.

What I was using

Let me start by explaining what I was using before. In my previous job, it was a lot of bootstrap and towards the end, custom BEM CSS.

Meaning we created custom stylesheets with a custom kind of framework, this made the code very light, and in that company, everyone would understand how to use it.

That was all good and well, but not very effective with onboarding people, and even for me, it was looking for certain classes sometimes.

Why I did switch

Even though I'm a big fan of Pure CSS (No framework) Tailwind seemed to be a perfect bridge.

It's a non-bloated utility framework.
Meaning we don't have pre-defined component, and it helps us write faster css.

For example, let's create a button that will have a different color on hover.

Tailwind

<a class="text-blue-300 hover:text-blue-500">My link</a>
Enter fullscreen mode Exit fullscreen mode
/* No CSS needed */
Enter fullscreen mode Exit fullscreen mode

Pure css. (You see smaller HTML)

<a class="btn">My link</a>
Enter fullscreen mode Exit fullscreen mode
.btn {
  color: #90cdf4;
}
.btn:hover {
  color: #4299e1;
}
Enter fullscreen mode Exit fullscreen mode

As you can see, both will do the same thing, but it saves us some CSS lines!

See the Pen My first experiences with Tailwind CSS by Chris Bongers (@rebelchris) on CodePen.

Key benefits

So from using it for a week, the main benefits to me seem:

Fast to setup

It's super fast to get started with Tailwind. Either a CDN load or NPM install, and you're good to go.
Their docs are also super good, so you can just type there what you are looking for and apply that.

Setting up Tailwind for Angular.

Speed

It's so easy to write your own "components" sort of speak. The code is readable. It's so self-explanatory what an element does.

No bloating CSS

You don't need 20 SCSS files that all have some part of your component in them.

Easy responsiveness

Another great takeaway from Tailwind is how easy it is too have responsive elements.

The framework is mobile-first, so every normal class is what it would look like from mobile up.

We can then add the following "breakpoint" classes.

  • sm: Default on a minimum width of 640px
  • md: Default on a minimum width of 768px
  • lg: Default on a minimum width of 1024px
  • xl: Default on a minimum width of 1280px

With that we can easily add classes like so:

<h1 class="text-sm sm:text-sm md:text-md lg:text-lg xl:text-xl">Title</h1>
Enter fullscreen mode Exit fullscreen mode

This is just an example, if you will make your screen smaller and bigger we see a different font-size.

Pitfalls of Tailwind

So one of the things I noted very quickly was the repeating classes that didn't really make it extendable at all!

So let's se wee have a couple of buttons in our navigation as such:

<a class="bold text-xl text-indigo-500 hover:text-indigo-700">Link 1</a>
<a class="bold text-xl text-indigo-500 hover:text-indigo-700">Link 2</a>
<a class="bold text-xl text-indigo-500 hover:text-indigo-700">Link 3</a>
Enter fullscreen mode Exit fullscreen mode

Wow, that's annoying now we need to have all those classes three times, here my oldskool css would definitely be better!

BUT, there is a solution. Tailwind can extend!

So we can define a new class for those elements and render them as such by using @apply.

<a class="indigo-btn">Link 1</a>
<a class="indigo-btn">Link 2</a>
<a class="indigo-btn">Link 3</a>
Enter fullscreen mode Exit fullscreen mode
.indigo-btn {
  @apply bold text-xl text-indigo-500;
}
.indigo-btn:hover {
  @apply text-indigo-700
}
Enter fullscreen mode Exit fullscreen mode

This will now do the same, making it easier to change and re-use our own defined components.

In the end, it's all about creating a good mix between not reinventing the wheel and making use of the utilities we have.

So far, I'm like how quick and easy Tailwind CSS is!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion

pic
Editor guide
Collapse
youhan profile image
Alireza Jahandideh

Thanks for your article 🙂

@apply just ruins the whole point of TailwindCSS. It is something that is there to just let you have an easier transition from SASS-like-setup to TailwindCSS. When I started to use TailWindCSS I heavily used @apply. Then I realized I am just doing it like before, like SASS and the difference was just using @apply. Now after a year, I see very little use cases of @apply. That's for me at least, in which I use TailwindCSS and VueJS.

Collapse
dailydevtips1 profile image
Chris Bongers Author

So do you make a component for literally anything that is re-used?
Is it then quicker or where is the win?

Collapse
youhan profile image
Alireza Jahandideh

Yes, I try to refactor anything which has a repeating pattern as a component like buttons, headings, form elements, etc. Not always, but most of the time. Well, Chris, I haven't timed myself but it feels quicker since I don't spend time thinking about in which CSS file should I put this CSS? Is it a partial.css or layout.css or base.css? with BEM, SMACCS (or anything that is based on separating the concerns using folder structure) I usually struggle finding answers to

  • where to put it,
  • what is the proper class name
  • and I find myself often lost switching between files.

With TailwindCSS that thought process is completely gone, I just think about the style and that seems to be a good enough win for me.

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

Yeah, 100% I get your point of where to put stuff etc.
I did have those issues when using bem a lot, like is this a general thing or component line.
It's get's a lot of thinking involved.

For now, let's just try this project with Tailwind and see how I feel after it haha.

Collapse
sathishweb profile image
Sathish Ramani

Nice article. I am looking to learn Tailwind CSS soon. I am a newbie to frontend development. I have not worked with CSS at all and only used some ready-made bootstrap template on a hobby project (with dumb frontend and doing everything in python DJANGO backend :-) ). I only understand some basics of HTML. Now, If I start learning web (frontend) development, can I start with Tailwind CSS after HTML without learning CSS or SCSS and directly move to JS after that? It looks like I can just use a combination of pre-existing Tailwind classes on HTML tags to get the desired UI without understanding much of CSS itself?

Collapse
dailydevtips1 profile image
Chris Bongers Author

No first learn CSS, before getting into tailwind, it does not make sense to skip the basics.
Tailwind expects you to understand how CSS works.
You'll have a hard time understanding if you come from no CSS background.
Also, don't rush into JS, it's a big topic and essential for understanding web techniques.

Collapse
sathishweb profile image
Sathish Ramani

Thanks. That's what I guessed as well. Seeing the tags with tailwind classes is just tempting to jump right in :-). I understand that is not the right approach.

Thread Thread
adeborat profile image
adeborat

learning CSS with tailwindcss for me is the best approach.. it's easiest way to learn CSS. tailwind CSS + chrome dev to see generated css

Collapse
studmuffin30 profile image
studmuffin30

better to learn CSS first ,than tailwind or bootstrap ,cause CSS is just the basic so u need to learn the basic to understand how this frameworks works.

Collapse
codingsafari profile image
Nico Braun

I think the point of smaller HTML is not valid. If you define a class and use it only once, then yes but the whole point is to reuse classes, right?

So tailwind tends to bloat your HTML massively since you mostly don't use this kind of abstraction layer. Meaning tons of repetition.

The author comments on this by saying use component libraries such as vue. It doesn't avoid repetition HTML but the repetition of having to write it.

Collapse
dailydevtips1 profile image
Chris Bongers Author

I mention vanilla CSS having smaller HTML in comparison.
Not about Tailwind, but agreed it should be used in a component-based system to use components and minimize the actual repetitiveness.

It does force you to write a very small component based

Collapse
xowap profile image
Rémy 🤖

So if you work with a components system, the CSS is linked to the component file? At least in VueJS it is. So this kinds of invalidates the point of avoiding CSS bloat.

I'm really not convinced by the whole "I'm not sure where to put CSS so the simplest must be in HTML right?" stance

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

Yes exactly so in Angular and vue and react you would have some kind of component styling file.
So here is where you already doing some best practice.
I do think it's a good idea to check what's out there and see how it can or cannot work for someone.

Collapse
studmuffin30 profile image
studmuffin30

tailwind creator told not to use @apply,something with its just facade or something ,look it up

Collapse
dailydevtips1 profile image
Chris Bongers Author

Yes I saw this after, it's weird though I don't think that was very clearly described.
I did see it after 2 days he mentioned you should use a component library to generate unique components instead of re-using html.

Collapse
xowap profile image
Rémy 🤖

That's a good idea. We could group CSS properties so we can re-use them at several locations and we would call that... Classes

Collapse
futureistaken profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
R Z

Why use something that has no future?

Collapse
dailydevtips1 profile image
Chris Bongers Author

Why do you say it has no future?
It seems to be a very big thing used by many big companies at the moment.
Why not have a look at what it is?

Collapse
capsule profile image
Thibaut Allender

OK I'll help you: Tailwind (or any utility css framework) is just going back to inline styles. Ugly HTML, no separation of content and presentation, the need to learn tailwind. what happens when you need custom css or want to overwrite something that you don't like in tailwind? You still need to write custom CSS anyway. It just makes no sense, never has, never will.

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

Yes that is exactly my feeling so far.

I mean don't get me wrong, it's cool and I was kind of over bootstrap because you have to re-do most of that anyway.
But compared to pure CSS I don't see any real strength, especially in component-based systems...

Why do you think it has such a high adoption, fan base?

Thread Thread
capsule profile image
Thibaut Allender

The prospect is attractive to junior developers. They think CSS is difficult so anything that allows them to write as little CSS as possible is a massive win. So instead of using that precious time learning CSS, they learn tailwind. What’s even worse is when they used bootstrap before; imagine all these years learning frameworks while they could have learnt a core knowledge instead. It blows my mind and makes me really sad.

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

True indeed, let's hope a trend will come where we just go back to vanilla js and plain css then :D

Thread Thread
capsule profile image
Thibaut Allender

Mate, it's up to you only to follow the trend you feel is the right one, but generally speaking, trends in development don't last long. Be a craftsman, don't let the brand new shiny tools get control of yourself.

Collapse
futureistaken profile image
R Z

Because it violates design principles in general.

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

Explain more on the why?

Thread Thread
futureistaken profile image
R Z

After you explain to me why it doesn't

Thread Thread
edimeri profile image
Erkand Imeri

It has something called @apply and you can skip the inline CSS bloating.

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

But the framework author mentions you should really try and avoid this @apply rule 🤷‍♂️

Thread Thread
edimeri profile image
Erkand Imeri

Not sure, so you have both pro and against arguments for using. But, i would definitely use it for small to medium projects.