DEV Community

Cover image for Why start using TailwindCss in 2021

Why start using TailwindCss in 2021

Leonardo Tononi on April 11, 2021

Hi, this is Leonardo. I'm a simple human that tries to improve day by day, step by step. If it’s your first time here you can read who I am in thi...
Collapse
 
moopet profile image
Ben Sinclair • Edited

Why bother learning this new way of writing CSS?

It's an old way of writing everything! Nothing in Tailwind is new, and nothing was even new at the point when Tailwind came out.

Imagine no longer having to create separate files for component markups and its styles

But the content and the appearance are two separate things! Let's say you want a different makeover during certain times of year for holidays and so on. Or you want to give people a "reader mode", or you support people who want to print the page out.

Imagine no longer having to think of names for “Wrapper” or “WrapperOfWrapperOfWrapper

You're replacing your own homebrew "div soup" with someone else's. You don't need all those wrappers, in the same way you don't need all those million-and-one classes. 99% of websites could look exactly the same if every div was removed.

Collapse
 
easaaa profile image
Leonardo Tononi

But the content and the appearance are two separate things! Let's say you want a different makeover during certain times of year for holidays and so on. Or you want to give people a "reader mode", or you support people who want to print the page out.

I agree with your point. Tailwind is for sure far from perfection. But I feel it's giving a lot of benefits at my daily coding work. It's fun and easy to master. Obviously this is just my humble opinion and impression.

You're replacing your own homebrew "div soup" with someone else's.

Again you are totally right. But forn now, I'm liking a lot this "div soup". 😄

Anyway thanks a lot for your comment, really appreciate.

Collapse
 
cblte profile image
cblte

Hello. I tried tailwind in the past but gave up because, as like @moopet pointed out, you need sometimes a makeover. And instead of replacing all css classes, you replace the css file. Done.

Collapse
 
stokry profile image
Stokry

This is why I don't use Tailwind:
This is a button:

<button class="text-pink-500 bg-transparent border border-solid border-pink-500 hover:bg-pink-500 hover:text-white active:bg-pink-600 font-bold uppercase px-8 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" > Large </button>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
liamedwards profile image
Liam Edwards

You're creating all those style rules in CSS anyway. What's the difference? If you're adding multiple buttons with the same style, create a class and apply all those styles to it, or just add it to the base button styles.

Collapse
 
moopet profile image
Ben Sinclair

That's not how people use it; people do it the Bad Way in the example. Yes, you can use these to make up base rules, and that's fine to be fair, but it's the same as using something like Sass or Less with mixins, which people were doing for a decade before Tailwind appeared.

Thread Thread
 
liamedwards profile image
Liam Edwards

Personally I think Tailwind is great for smaller websites and SPAs in particular. I've only started using it recently in building my personal website and I'm a fan of it.
For my work, we have large stylesheets that become messy and cluttered and as much as I would love them to be clean, I know that's not easily achievable. While I haven't had to do it yet, I think maintaining Tailwind would be a lot simpler than a bunch of CSS styles that possibly overlap.

Collapse
 
stokry profile image
Stokry

I like my HTML clean as much as possible.

Collapse
 
eliancodes profile image
Elian Van Cutsem

True, this is one of the reasons I didn't like tailwind at first. But @apply classes changed my whole view on tailwind. Using @apply in combination with Sass is a whole different way to Write reusable TailwindCSS components: elian.codes/blog/using-tailwind-wi...

Collapse
 
pshuffle profile image
Thomas Shepard

This!

It is just the newest shiniest framework.

Collapse
 
andreidascalu profile image
Andrei Dascalu

The world spent the better part of the '90s figuring out how to separate markup from style and just when people finally figured out how to theme their website based on whether it's Christmas or not, here comes Tailwind take us back to when Altavista was the search engine.
Progress ftw.

Collapse
 
pontakornth profile image
Pontakorn Paesaeng

Tailwind just saved me a lot of keystrokes. It is easier to prototype or just change something quick with it. Especially @apply saves me lots of time spending on writing tedious style, media query, pseudo class (Such as :hover).

I use Tailwind in form of WindiCSS with Vue. So, I don't have to worry about purging unneeded styles. I use twin.macro in React and Next.

Collapse
 
intermundos profile image
intermundos

Tailwind rules. Now with JIT mode it's the ultimate CSS machine. Use it in html, use it in CSS files, sass or any other and enjoy speedcl and uniformity across all project. Perfecto!

Collapse
 
alexiswalravens profile image
Alexis Walravens

Why not just use CSS?

I love Tailwind but PLEASE.
Don’t use Tailwind before understanding CSS first.

Collapse
 
easaaa profile image
Leonardo Tononi

Oh Yes!! I totally agree.