Release Notes

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

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.

  1. // Example `tailwind.config.js` file
  3. module.exports = {
  4.   important: true,
  5.   theme: {
  6.     fontFamily: {
  7.       display: ['Gilroy', 'sans-serif'],
  8.       body: ['Graphik', 'sans-serif'],
  9.     },
  10.     extend: {
  11.       colors: {
  12.         cyan: '#9cdbff',
  13.       },
  14.       margin: {
  15.         '96': '24rem',
  16.         '128': '32rem',
  17.       },
  18.     }
  19.   },
  20.   variants: {
  21.     opacity: ['responsive', 'hover']
  22.   }
  23. }

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

Release Notes - 图1

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.

  1. // tailwind.config.js
  2. module.exports = {
  3.   theme: {
  4.     screens: {
  5.       'sm': '640px',
  6.       'md': '768px',
  7.       'lg': '1024px',
  8.       'xl': '1280px',
  9.     }
  10.   }
  11. }

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.

  1. <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.

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

Learn more in the order documentation.