Release Notes

What's new in the latest version of Tailwind CSS.

Tailwind CSS v1.1

Aug 6, 2019

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:

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

May 13, 2019

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.

Teal

100
#E6FFFA
200
#B2F5EA
300
#81E6D9
400
#4FD1C5
500
#38B2AC
600
#319795
700
#2C7A7B
800
#285E61
900
#234E52

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.