Release Notes

Tailwind CSS v1.6

Tailwind CSS v1.6 is now available with animation support (!) and a bunch of other neat stuff:

• Animation support
• New prefers-reduced-motion variants
• New overscroll-behavior utilities
• Generate your CSS without an input file

For all the details, check out the complete release notes on GitHub.

Tailwind CSS v1.5

Tailwind CSS v1.5 is now available with a handful of useful new features:

• Component variants support
• Responsive container variants
• New focus-visible variant
• New checked variant

For the full list of changes, check out the complete release notes on GitHub.

Tailwind CSS v1.4

Tailwind CSS v1.4 is out now with a couple of major new features:

• New color opacity utilities
• Built-in PurgeCSS support

For the full list of changes, check out the complete release notes on GitHub.

Tailwind CSS v1.3

Tailwind CSS v1.3 is now available with a bunch of super useful new features, including:

• New "space between" layout utilities
• New "border between" utilities
• New transition-delay utilities
• New group-focus variant

For the full list of changes, check out the complete release notes on GitHub.

Tailwind CSS v1.2

Tailwind CSS v1.2 is here and it's the biggest feature release since v0.1 dropped two and a half years ago!

Here are the features you're probably going to be the most excited about:

• CSS Grid support
• CSS Transitions support
• CSS Transforms support

For the full list of changes, check out the complete release notes on GitHub.

Tailwind CSS v1.1

The first new feature release since v1.0 has arrived! Tailwind v1.1 includes a bunch of new stuff, but I think the things you'll probably be most excited about are:

• New screenreader visibility utilities
• New utilities for setting the placeholder color on form elements
• New variants for first-child, last-child, nth-child(odd), and nth-child(even)

For the full list of changes, check out the complete release notes on GitHub.

Important note — although this is a minor release, it includes two bug fixes that may have a superficial impact on how your site looks if you are using horizontal rules in your site or are relying on the default placeholder color defined in Tailwind's base styles.

Be sure to read through the fixes section before upgrading to understand the impact.

Tailwind CSS v1.0

A year and a half in the making, the first stable release of Tailwind CSS is finally here! 🎉

Since we released the first alpha on November 1st, 2017, the framework has seen 43 releases, racked up 2,281 commits from 88 contributors, and been installed over 1.4 million times.

It's been adopted by big companies like Algolia and Mozilla, and used to build new startups like RightMessage and PingPing.

It's been a long road, but I'm super excited to finally have a truly stable version in the wild for us to build on for the future.

This release focuses mostly on solidifying the existing API and locking in any breaking changes, but does include some exciting changes too.

For a full list of changes and instructions on upgrading, read the upgrade guide.

Revamped config file format

In v1.0, the config file is completely optional, and if you do add a config file, you only need to specify your customizations, not your entire design system.

// Example `tailwind.config.js` file

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

This makes it a lot easier to know what values are custom for your project and which ones are built in to Tailwind by default, and in general keeps your config file a lot simpler and more manageable.

Learn more about the new configuration format in the configuration documentation.

Redesigned color palette

Tailwind v1.0 includes a brand new numeric color palette, where each color now comes with nine shades instead of seven.

Explore the new color palette in the customizing colors documentation.

Updated breakpoints

We've updated the default breakpoints for v1.0 to better reflect common modern device resolutions.

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
    }
  }
}

The new breakpoints are more practical to work with and make it a bit easier to avoid annoying compromises in your responsive designs.

New to responsive design with Tailwind? Check out our responsive design documentation to learn more.

New top/right/bottom/left utilities

Tailwind v1.0 includes new configurable utilities for top, right, bottom, and left, so you're no longer limited by the old pin classes.

<div class="top-16"><!-- ... --></div>

Learn more in the top/right/bottom/left documentation.

New order utilities

Tailwind v1.0 also includes new utilities for the order property so you can easily re-order elements inside of flex containers.

<div class="flex">
  <div class="order-last">1</div>
  <div>2</div>
  <div>3</div>
</div>

Learn more in the order documentation.