Tailwind V3 Alpha Release 🎉

Last week, TailwindCSS version 3.0 alpha-release was announced with some really cool features and updates!

In this quick post I'll highlight some of those awesome new features.

Just-in-Time, all the time

The Just-in-Time mode that was available as an optional configuration, is now enabled by default.

Using the JIT mode will give you the ability to include variants, pseudo elements, hover effects, and more without having to define them specifically in your configuration file. This mode also allows you to specify arbitrary values within your classes, like so:

<div class="transform -translate-x-[10px]"></div>

Hallelujah for JIT mode 🙌

Just-in-Time CDN build

You can include a new TailwindCSS JIT CDN JS file directly in your page to take advantage of all the TailwindCSS awesomeness without having to do any build steps.

Previously there was a TailwindCSS JIT project created by Marcel Pociot of BeyondCode here; however, this new version is going to be maintained by the core Tailwind team. They probably have a ton of cool new ideas with this new CDN version 😉

Every color by default

Colors, colors, and more colors! Every color by default!

Tailwind offers an awesome default color palette for you to use in your designs. They also offer an extended color palette to make some even prettier looking designs.

Typically in earlier versions of Tailwind you would need to import the extended color palette in your config before you can use them; however, these extended colors are now going to be made available by default in version 3 👨‍🎨

Kick-ass New Utilities

The new version of Tailwind will also include some pretty cool new utility classes available for use:

• New aspect-ratio utilities
• New scroll-snap utilities
• New scroll-behavior utilities
• New text-indent utilities
• New column and break-before/inside/after utilities
• New touch-action utilities
• New will-change utilities
• New border-x and border-y utilities

New Variants

New variants to love.

There are also a few out-of-the-box variants that will be included in the latest release, including:

• New file: variant
• New open: variant

Conclusion

All that I can say is that "I am super pumped about this new release!"

There are going to be so many new tools and designs you can build with this new release. You will also be seeing a new version of our TailwindCSS page builder coming soon with full support of this new version.

You can check out the full release notes by the creator, Adam Wathan, via the release notes here.

That's all! Happy coding, designing, and tailwinding... 🤔 not sure if that's going to stick. Ah well! Happy Tailwinding 😛