DEV Community

Cover image for You will love Tailwind CSS

You will love Tailwind CSS

Matteo Frana on February 12, 2020

Intro There are few technologies that I fell in love with. React is one of those, Redux is another, even if I don’t use it as much toda...
Collapse
 
dance2die profile image
Sung M. Kim

I've been using CSS-in-JS libraries (styled components/emotion/Theme-UI) and started learning Tailwind (TW hereafter) only last week.

So far, it seems like it'd be a great fit for "component" level styling.

How are site-wide styling handled with TW? Does it make sense to write the whole site with TW? Or should we leave the global styling to CSS/SASS?

Collapse
 
bobwalsh47hats profile image
Bob Walsh

The short answer is you can mix and match, and then with purgecss, clean put your unused classes before putting a project into production. TW is atomic: classes do not need or expect other classes, unlike say bootstrap.

The longer answer is you can handle setting site-wide styling with @apply - see this video.

Collapse
 
dance2die profile image
Sung M. Kim

Thank you, Bob.

That @apply is a nice directive to apply a global style~

Collapse
 
matfrana profile image
Matteo Frana

Once you configure Tailwind for the basic defaults and you use a component-based framework like React, almost nothing is "global".
You may have a Header component, a Button component, a TextInput component... what's global? 😊

Collapse
 
dance2die profile image
Sung M. Kim

Thank you, Matteo. So long as each component is responsive, then it's a matter of composing each component :)

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited

and this is the thing that scares most of the developers approaching it

I think it's a well-founded fear, though. I don't personally like Tailwind or Bootstrap. They make it very overwhelming to parse what would otherwise be a very simple, legible chunk of markup. I can remember most of the CSS attributes and values I work with frequently. I would need to keep a reference sheet on hand, or study Tailwind's API, to remember most of their class names.

I think Steve Schoger is a brilliant designer/UI dev, though. Some of his UI tips have helped me make noticeable improvements to my own site.

Collapse
 
matfrana profile image
Matteo Frana

If you start using Tailwind, you'll see that in no time you'll remember almost all of the syntax.
Now for me it's much simpler to remeber justify-between than justify-content: space-between;.

As for the legibility, when you work with components, as with React, you encapsulate the "many class complexity" in the component: outside of it you just see <HeroUnit title="..." />

Collapse
 
david_ojeda profile image
David Ojeda

Always pleased to hear someone being happier by using a new tool!

I've never used Tailwind- just read that people are generally happy with it.

Noob question here, what's the difference between Tailwind and Bootstrap 4? I love the utility classes it comes with and, for what I've read, seem very similar to those in Tailwind's

Collapse
 
matfrana profile image
Matteo Frana

Tailwind is not opinionated, so you never have to "undo" default styles of the framework. It is designed to be customized and the responsive variants (screen-size: prefix) are excellent to build great responsive interfaces quickly

Collapse
 
apatrid profile image
Mijo

I'm using Tailwind for the first time in my current project with Vue.js (and Laravel) and I love it!

I can confirm all the things you mentioned; I do feel more productive and I think my design is much better with Tailwind (primarly used Bootstrap before).

However, I think Bootstrap and Bulma may be easier to setup and start with for people who aren't that much into JS or coding and just want to write HTML+CSS. You do need at least some basic experience in JS, npm, node modules to start with TailwindCSS and set it up right (with other postcss plugins, purgecss, build process,...).

Collapse
 
crongm profile image
Carlos Garcia β˜…

In my current project I've been doing just what Tailwind is all about: creating name-effective utility classes that can be applied to a broad array of elements without a second thought. It might be too late now to introduce Tailwind to this project but I'll have it in mind for future ones. Thanks for bringing it to my attention.

Collapse
 
rnrnshn profile image
Olimpio

I've tried it but I don't like to see a website full of atomic classesπŸ€·πŸΌβ€β™‚οΈ... The HTML gets ugly with a lot of classes... Or I'm missing something?

Collapse
 
matfrana profile image
Matteo Frana

To keep HTML beautiful usually ugliness is hidden in the CSS :)

Really:
1) You get used to read Tailwind classes
2) With React, I hide this class names inside React components: every component is small and the final JSX ("HTML") is very clean

Collapse
 
wevisualizeit profile image
Jordan Hernandez • Edited

You can 'store' the classes in an object : example -->
const style = {
card:['max-w-sm rounded overflow-hidden shadow-lg content-center mx-auto'],
}
return(
div className={style.card}
)

Collapse
 
icanrelate profile image
chriz

Sorry for the naive question, I haven't really checked Tailwind out, but I've heard good things about it. How do you override CSS though? My use case would be having a base CSS for English, and have overrides for other languages.

Collapse
 
pozda profile image
Ivan Pozderac • Edited

no need to override, you want left border to be 2 px and orange with some padding and gray background, also text should be orange as well?

<div class="border-solid border-l-2 border-orange-500 px-6 py-4 bg-gray-200 text-orange-500">some content or message</div>

that's it, there is nothing to override here

Collapse
 
matfrana profile image
Matteo Frana

Thank you for the kind words! 😊