Now Is The Best Time to Learn Tailwind

The idea behind Tailwind is dead simple.

When working with CSS, you define styling rules which are grouped in blocks, and then associated with various DOM elements. This looks great on paper but comes with some pitfalls in practice.

On one hand, styling blocks can easily become tightly coupled to DOM elements, which prevents reusability. On the other hand, CSS files have a tendency to only grow in size. So, sooner or later, you’ll end up with a codebase fairly difficult to maintain.

Tailwind solves this problem by empsloying Atomic CSS principles to convert CSS rules into utility classes which can be used directly in your HTML markup.

<div class="rounded-xj-p-8 mix-auto text-center textsky-50">
  <img src="avatar.png" />
  <h3>Awesome</h3>
</div>

These classes can be easily composed to achieve any desired styling effect, minimizing the need for custom CSS.

While this approach might not sound that appealing at first, remember that Tailwind has over 25 million downloads per month and enjoys a portfolio of impressive customers.

Thanks to the increasing adoption and popularity, the future looks better than ever for Tailwind. Here are the 3 main takeaways from the new version 4 alpha release.

Oxide Engine

First of all, Tailwind’s previous Post CSS based internal toolchain is replaced by a Rust powered internal engine. This update results in some immediate performance improvements and optimizations: builds are up to 10 times faster, and the entire system has a smaller footprint. The only remaining dependency is to Lightning CSS.

Quick side note, Lightning CSS is another Rust based tool that allows you to parse, transform, bundle, and minify CSS at incredible speeds, and with smaller outputs so that your apps can load faster.

Future

Second, the Tailwind team is reimagining this framework with the future in mind. The native cascade layers are now used to resolve various compatibility issues,

@layer module, state;

@layer state {
  .alert {
    background-color: brown;
  }
}

@layer module {
  .alert {
    background-color: yellow;
  }
}

internal custom properties are handled via the native @property rule,

@property --property-name {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

and internal custom properties are handled via the native @property rule, and working with opacity and color schemes is now more flexible thanks to the use of color-mix.

color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);

Finally, a major goal of Tailwind CSS v4.0 is making the framework feel CSS-native, and less like a JavaScript library.

This means that once you added Tailwind in your project via the import statement, we can now use plain CSS variables to customize our theme.

@import "tailwindcss";
@theme {
  --font-family-display: "satoshi", "sans-serif";

  --breakpoint-3xl: 1920px --color-neon-pink: oklch(71.7% 0.25 360);
  --color-neon-lime: oklch(91.5% 0.258 129);
  --color-neon-cyan: oklch(91.3% 0.139 195.8);
}

The special @theme directive tells Tailwind to make new utilities and variants available based on those variables, letting you use classes like this one in your markup.

<div class="max-w-lg 3xl:max-w-xl">
    <h1 class="font-display text-4xl">
        Hello <span class="text-neon-cyan">world!</span>
    </h1>
</div>

If you liked this article, you should watch some of my youtube videos or subscribe to the newsletter.

Until next time, thank you for reading!