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>
/* No CSS needed */
Pure css. (You see smaller HTML)
<a class="btn">My link</a>
.btn {
color: #90cdf4;
}
.btn:hover {
color: #4299e1;
}
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>
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>
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>
.indigo-btn {
@apply bold text-xl text-indigo-500;
}
.indigo-btn:hover {
@apply text-indigo-700
}
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
Top comments (28)
Thanks for your article 🙂
@applyjust 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.So do you make a component for literally anything that is re-used?
Is it then quicker or where is the win?
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
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.
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.
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?
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.
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.
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
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.
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
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
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.
tailwind creator told not to use @apply,something with its just facade or something ,look it up
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.
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
Some comments may only be visible to logged-in visitors. Sign in to view all comments.