Jumping into Tailwind

While you might not need Tailwind, it can be a big help with best practices for styling, creating dark modes and handling media queries.

The New Standard CSS Productivity Tool

https://www.youtube.com/watch?v=mr15Xzb1Ook

What is Tailwind?

Tailwind is a CSS utility class that can be used in HTML or any framework. It follows the rules of design so that your colors flow together, your elements are spaced correctly, and your mobile apps transition seamlessly. It also makes CSS animation as easy as 1, 2, 7. I mean, you will actually be counting the right way with Tailwind. 😶

Do I Need Tailwind?

Nope. You can function just fine when building a website without Tailwind. However, do you know what colors go well together? Do you what to manually write in a class every time your text needs to be green? Do you know how to properly organize your stylesheets? Do you create a new stylesheet for dark mode? Are you up to date with all the rules of CSS, SASS, SCSS, LESS or PostCSS? Is it better to use an element id, a class, a className or an inline style? Do you know the most common and best practices for media queries?

If so, by all means stick with vanilla CSS. I, on the other foot, will be using the big T.

Learning Tailwind

If you have been navigating for years without Tailwind, you need to learn it. It will just make your life easier.

I’ve seen some blog posts and videos stating you don’t need to learn Tailwind, learn CSS first and you know Tailwind. This is baloney. Tailwind is just Level 2 of CSS, and they complement each other.

Most skeptics have never tried it. Once they do, they invariably decide to stick with it. If you know CSS, you will know it better with Tailwind.

Flexbox Example

If you read the W3 Schools CSS Flexbox page, you will see a list of flexbox commands, which won’t really help you in using the Tailwind equivalent.

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Sometimes these examples are great, but it doesn’t give us the big picture. The Tailwind CSS Flex page basically translates for you what the commands are called in Tailwind. You can see a real world center usage case.

<div class="flex items-center ...">
  <div class="py-4">01</div>
  <div class="py-12">02</div>
  <div class="py-8">03</div>
</div>

But I don’t think I really learned completely that way. I have noticed I work backward. If you look at the code inside a Tailwind UI Navbar, you will see WHEN to use a flexbox.

<div class="relative flex h-16 items-center justify-between">
...
</div>

You will start to see the patterns and best practices for CSS. CSS has existed for years, and there are a lot of bad examples. Stack Overflow has some for example, but only because CSS has evolved a lot from 2011 and when HTML5 came out in 2014. People have since then experimented and came up with best practices on how to center a div. A flexbox seems to be the best way for many cases, but you may not know it. Don’t get me started on browser compatibility problems finally ending; except YOU Safari, I see you!

VS Code

You may need to install a few VS Code Extensions to use Tailwind better. If you use Vim, you’re a programming baby-boomer and I really am not sorry for you. Get with the show, man.

• Tailwind CSS IntelliSense – This is a must. Install it, and you will have auto-complete. Sometimes you just need to press ctrl+space on Windows or ^+space on Mac.
• Tailwind Fold – This allows you to hide all the crazy repetitive classes by a few dots. Some people love this. I don’t find it useful, as I want to see what my component is doing.

There are 20 or so more, but these are the ones worth mentioning that I have tried. The more extensions you have, the slower VS Code can be, so do what you want.

Components

https://twitter.com/surjithctly/status/1638194381017456645

One thing that bothers me about Tailwind UI, is that the examples are just pure HTML. I don’t know whether or not Tailwind is even useful without a framework. A framework allows you to create components so that you don’t repeat all the crazy code. This is why I don’t use Tailwind Fold. If you create your components correctly, you won’t be repeating code.

@apply

The apply directive allows you to declare classes of classes. This is one way to handle repetition:

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

https://twitter.com/adamwathan/status/1226511611592085504?lang=en

However, Tailwind’s creator is against using it, although most people think it has its place. I personally don’t use it since I don’t want to declare more classes, and some libraries just use variables under the hood. SmelteJS copied is Material UI written with Tailwind and just uses the variable concept (don’t use this library except for reference, as no one maintains it). You should also checkout UnoCSS if you want to see more abstraction options and a Tailwind competitor.

UI Frameworks

A lot of UI frameworks actually use Tailwind under the hood. Creating a carousel or making a menu work would require JS as well as CSS, so people built UI frameworks; we don’t want to reinvent the wheel.

• daisyUI – seems to work with all major frameworks
• Skeleton – I’m a huge fan of this Svelte UI framework
• Flowbite – You probably see this on Google a lot when you search for a Tailwind component
• Tailwind Elements – A Material-like UI framework

Tailwind just simply makes productivity faster. I honestly don’t see myself ever going back. I just want to be more productive. I don’t want to worry about naming things, nor how to center a div ever again. I just hope it can get built into HTML6.

Try it out with the Framework Guide.