DEV Community

loading...
Cover image for Why start using TailwindCss in 2021

Why start using TailwindCss in 2021

easaaa profile image Leonardo Tononi ・3 min read

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 this blog post “Who am I”, otherwise skip this part.

Introduction

From their website we understand that TailwindCss is a utility first css framework. It allows us to write our style directly in the html. “Yes OK” you will say “but I have a thousand of questions!” Don’t worry, in the article I will try to answer everything you should evaluate to see if it is a right fit for your needs.

What it is and what are the advantages?

Let’s get straight to the point. Why bother learning this new way of writing CSS? Well I’d start by saying it’s fucking fast! What do I mean by fast? Imagine no longer having to create separate files for component markups and its styles. Imagine no longer having to think of names for “Wrapper” or “WrapperOfWrapperOfWrapper”. Not having to continually import or export css variables. Imagine you can do it all in one line.

Imagine being able to copy and paste entire structures of components already created by someone else, where you can apply your personal style in the blink of an eye. Imagine being able to focus primarily on creating the logic of your application.
That is Tailwind.

Why is it better than others?

I have never really tried other css frameworks in the same way I tried Tailwind. But what I can tell you is that while others have a more defined and less easily customizable style, with tailwind everything remains in our hands, but at the same time it allows you to have a good level of predefined style guidelines.
So if you are like me, you don’t have a strong knowledge of design, you can still create beautiful applications or web pages without compromise the unicity of your style.

A site created with tailwind is difficult to detect at first sight, on the contrary the sites created with other frameworks have a more marked and recognizable imprint.

I want to show you some example of what triggered my curiosity.
Below an example of an easily integrated dark mode:

// tailwind.config.js
module.exports = {
  darkMode: ‘medium’,
  // …
}
Enter fullscreen mode Exit fullscreen mode
<div className=“bg-white dark:bg-gray-800”>
  // .....
</div>
Enter fullscreen mode Exit fullscreen mode

Not to mention the media query, which can be integrated with a simple "md: text-white" to say "@media (min-width: 768px) {…}".
In my humble opinion this is really cool and everything is so easily customizable.

Also, most Tailwind projects ship less than 10KB of CSS to the client.

Why not just use CSS?

Because Tailwind requires a minimal learning curve and the documentation it’s really well done. Over time, it will make the creation of projects much easier and faster, without having to leave behind the flexibility of pure css.

Furthermore, once you have decided to create a project with tailwind, it will always be possible to apply other types of css, like styled components.

Recap

  • Speed up the creation and the design of any project
  • Allows you to raise the bar of your style
  • You can say goodbye to having to create fancy names for your components or Css variables = Easy
  • Highly customizable
  • Dev friendly, covers the real needs that a developer may have in 2021

EXTRA: some useful FREE resources

Discussion (15)

pic
Editor guide
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 Author

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
elianvancutsem 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
pontakornth

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 Author

Oh Yes!! I totally agree.