Blog

All the latest Tailwind CSS news, straight from the team.

Tailwind CSS v2.2

Well I can’t say we were really planning on it but over the last few weeks we’ve been having a ton of fun dumping new and exciting features into Tailwind and now feels like the right time to cut a release, so here it is — Tailwind CSS v2.2!

We’ve built-in a new high-performance CLI tool, added ::before and ::after support, introduced new peer-* variants for sibling styling, added variants for styling highlighted text, and tons more.

Tailwind UI: Now with React + Vue support

Last year we released Tailwind UI — a huge directory of professionally designed UI examples built with Tailwind CSS. Up until now, all of the examples in Tailwind UI have been pure HTML which is sort of the lowest common denominator for all web developers, and makes it possible to adapt them to any templating language or JavaScript framework.

Today we’re excited to add first class support for React and Vue 3 to all of the examples in Tailwind UI, which makes it even easier to adapt them for your projects.

Tailwind CSS v2.1

The first new feature update since Tailwind CSS v2.0 is here and loaded with lots of cool stuff! We’ve merged the new JIT engine to core, added first-class support for composable CSS filters, added blending mode utilities, and a bunch more.

Heroicons v1.0

Just over a year ago we released the very first version of Heroicons, which is a set of beautiful UI icons we designed alongside Tailwind UI. Since then we’ve added tons of new icons, and designed and launched a dedicated web experience.

Today we’re excited to finally release Heroicons v1.0, which includes over 450+ free icons in two styles, official React and Vue libraries, and Figma assets.

Date
Read more, Heroicons v1.0

Just-In-Time: The Next Generation of Tailwind CSS

Update: As of Tailwind CSS v2.1, the new Just-in-Time engine is included right in Tailwind CSS itself, so you don’t need the @tailwindcss/jit package anymore. Learn more in the documentation.

One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even the browser itself will comfortably tolerate.

For that reason, you’ve always had to be careful about expensive changes to your config file like adding too many extra breakpoints or enabling extra variants like disabled or focus-visible.

Today I’m super excited to share a new project we’ve been working on that makes these considerations a thing of the past: a just-in-time compiler for Tailwind CSS.

Welcoming David Luhr to Tailwind Labs

We started working with David Luhr last summer on a project-by-project basis to help us develop a Figma version of Tailwind UI (almost ready!), as well as to leverage his accessibility expertise when building Tailwind UI templates, ensuring we were following best practices and delivering markup that would work for everyone, no matter what tools they use to browse the web.

Today we’re excited to share that David has joined the team full-time!

Multi-line truncation with @tailwindcss/line-clamp

Imagine you’re implementing a beautiful design you or someone on your team carefully crafted in Figma. You’ve nailed all the different layouts at each breakpoint, perfected the whitespace and typography, and the photography you’re using is really bringing the design to life.

It looks totally amazing — until you connect it your actual production content and realize that your beautiful grid of blog cards falls apart because, of course, real article excerpts aren’t all magically exactly three lines long, and now each card is a different height.

Sound familiar? If so, the line-clamp plugin is here to save your bacon.

Tailwind CSS v2.0

Almost exactly 18 months ago we released Tailwind CSS v1.0, which signalled a commitment to stability while continuing to push the boundaries with exciting new features in every minor release.

Over the course of those 18 months we released nine minor versions that added features like placeholder styling, screenreader visibility, CSS grid, transitions, transforms, animations, layout utilities, integrated tree-shaking, gradients, and tons more.

Today we’re finally releasing Tailwind CSS v2.0.

Date
Read more, Tailwind CSS v2.0

Tailwind CSS v1.9.0

We just released Tailwind CSS v1.9 which adds support for configuration presets, useful new CSS grid utilities, extended border radius, rotate, and skew scales, helpful accessibility improvements, and more!

Date
Read more, Tailwind CSS v1.9.0

Introducing Tailwind Play

To get the most out of Tailwind, you need a build step. It’s the only way to be able to customize your tailwind.config.js file, extract components with @apply, or include plugins.

This isn’t a problem if you’ve already bought in to the framework, but if you’re just trying to kick the tires for the first time it’s a lot of friction. You either have to set up a local development environment with PostCSS support, or stick to the static CDN build, which means you lose out on lots of cool features.

So today we’re excited to release the first version of Tailwind Play, an advanced online playground for Tailwind CSS that lets you use all of Tailwind’s build-time features directly in the browser.

Headless UI: Unstyled, Accessible UI Components

One of the biggest pain points when building modern web applications is building custom components like select menus, dropdowns, toggles, modals, tabs, radio groups — components that are pretty similar from project to project, but never quite the same.

You could use an off-the-shelf package, but they usually come tightly coupled with their own provided styles. It ends up being very hard to get them to match the look and feel of your own project, and almost always involves writing a bunch of CSS overrides, which feels like a big step backwards when working Tailwind CSS.

The other option is building your own components from scratch. At first it seems easy, but then you remember you need to add support for keyboard navigation, managing ARIA attributes, focus trapping, and all of a sudden you’re spending 3-4 weeks trying to build a truly bullet-proof dropdown menu.

We think there’s a better option, so we’re building it.

Utility-Friendly Transitions with @tailwindui/react

Back in February we released Tailwind UI, a directory of HTML component examples designed for you to copy and paste into your Tailwind projects as a starting point for your own designs.

We built Tailwind UI as an HTML-only, bring-your-own-JS product to make it as universal as possible, but many designs are inherently interactive and porting those interactive behaviors between JavaScript frameworks is unfortunately not always very easy.

One example of this is enter/leave transitions, like when you toggle a dropdown menu and see it fade in and out.

Tailwind CSS v1.7.0

Another new Tailwind release is here! This time with support for gradients, background-clip, experimental support for using @apply with variant utilities, and tons more. Let’s dig in!

Tailwind CSS v1.6.0

It’s like Tailwind CSS v1.5 except now there’s animation support, overscroll utilities, and more!

There aren’t supposed to be any breaking changes here, but I thought that last time too. If I did break something, first person to report it gets a Tailwind shirt.

Simon Vrachliotis Joins Tailwind Labs

Today we are super excited to share that Simon Vrachliotis has joined the development team at Tailwind Labs! (We just finalized that new business name by the way, pretty cool right?)

Simon has been a utility-first true believer since before Tailwind even existed, and authored an oft-referenced case study on his experience rebuilding his company’s entire website with functional CSS in 10 days way back in February 2017.

Building the Tailwind Blog with Next.js

One of the things we believe as a team is that everything we make should be sealed with a blog post. Forcing ourselves to write up a short announcement post for every project we work on acts as a built-in quality check, making sure that we never call a project “done” until we feel comfortable telling the world it’s out there.

The problem was that up until today, we didn’t actually have anywhere to publish those posts!