Latest

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

  • Published on

    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.

  • Published on

    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!

  • Published on

    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.

  • Published on

    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.

  • Published on

    "What's new in Tailwind CSS?" on YouTube

    A lot of cool stuff has been added to Tailwind since the last time we published any screencasts, so we thought it would be a great idea to record a little series that covers all of the new additions.

    "What's new in Tailwind CSS?" is a series of 12 short videos that teach you everything you need to know about some of our favorite new Tailwind features.

  • Published on

    Tailwind CSS v1.8.0

    Tailwind CSS v1.8 is now available with a handful of new utilities, a couple new features, and an exciting new experiment!

  • Published on

    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.

  • Published on

    Introducing Heroicons.com

    A few months back we quietly released Heroicons, a set of free SVG icons we initially designed to support the components in Tailwind UI. Today we’re launching the official Heroicons web experience, which makes it easier than ever to search for icons and quickly copy them to your clipboard as Tailwind-ready HTML or JSX.

  • Published on

    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!

  • Published on

    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.

  • Published on

    Tailwind CSS v1.5.0

    I was hoping to save v1.5.0 for something really exciting but we needed a new feature to support the new @tailwindcss/typography plugin so h*ck it, we're dropping some new stuff on you early.

    No breaking changes, this is a minor release and we're professionals you silly goose.

  • Published on

    Introducing Tailwind CSS Typography

    Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.

    That's why today we're excited to release @tailwindcss/typography — a plugin that lets you easily style vanilla HTML content with beautiful typographic defaults.

  • Published on

    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!