Tailwind CSS

Tailwind is pretty great and extremely hyped, but let's face it, it can't do simple things like dynamic classes, and that is one of the biggest downsides of using Tailwind.

I mean, come on, you can't do something as simple as this 🫠

<div className={`text-${colorName}-${colorShade}`}>

This is because Tailwind is a build tool, not a runtime tool, so it doesn't run your code. Tailwind can only scan the code and look for the strings that match the classes or arbitrary names to generate the CSS, so if your class name is not a static string like text-slate-400 that can be found by a cmd/ctrl+shift+F it won't work.

What is Tailwind Great For?

Tailwind gives you an amazing design system to build UIs quickly. When I say design system, I mean the color schemes and the units, the units are consistent for margin, padding, width, etc. Tailwind is different from Bootstrap as it is not opinionated, it is just a design system with a bunch of classes that you can use to build stuff. Important note about the design system, you have to avoid arbitrary values like w-[32rem], instead, you can use w-6 which is 24px, keeping the project consistent with the units will make it a lot easier for maintainability and help you create a good-looking UI.

Smart selectors

Tailwind has some pretty cool utilities for smart CSS selectors. They include styling based on group (parent), nested group, sibling, arbitrary group, and form state. These utilities are pretty useful to do things that we can do in CSS but using just classes. Starting with some simple but useful, text-sky-400/75. This is the sky color with the 400 shade and 75% opacity applied.

Groups with arbitrary values

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

Differentiating nested groups

<ul>
  {people.map((person) => (
    <li class="group/item">
      <div>
        <a href="{person.url}">{person.name}</a>
      </div>
      <a
        class="group/edit invisible hover:bg-slate-200 group-hover/item:visible"
        href="tel:{person.phone}"
      >
        <span class="group-hover/edit:text-gray-700">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500"></svg>
      </a>
    </li>
  ))}
</ul>;

Arbitrary variants are possible

<ul>
  {people.map((person) => (
    <li class="[&:nth-child(3)]:underline">{person}</li>
  )}
</ul>

and even @supports which is awesome!

<div class="... [@supports(display:grid)]:grid">
  <!-- ... -->
</div>

So this is probably enough to show that it has great features, if you want to see more check this page to see all the good stuff

One of the biggest advantages of Tailwind is the consistency it brings to the design system. By using predefined classes, developers can quickly create UI elements with consistent margins, padding, font sizes, and other design elements. This allows developers to focus on creating the actual UI components rather than worrying about the visual design of each element.

The other great thing is that CSS classes will be cached, so it's a good idea for performance. In contrast, style props will get evaluated again and again, increasing the cost of rendering the page.

Tailwind also offers a high degree of customization through its configuration file. Developers can choose which classes to include or exclude, define their color palette, and even set their font family and font weights. This means that developers can easily create their custom design system that fits the needs of their specific project.

Another advantage of Tailwind is its excellent documentation and community support. The official Tailwind documentation is extensive and covers everything from installation to advanced usage. In addition, there is a large community of developers who use Tailwind and are available to answer questions and provide support on platforms like GitHub, Reddit, and Discord.

And to finish, my hope for the future of Tailwind is just one thing:

This will solve the biggest pain in Tailwind, JUSTDOEIT!