Release Notes

Tailwind CSS v1.9

Tailwind CSS v1.9 is now available with a new presets feature, some new utilities, and a few accessibility improvements. Check it out!

New features

• Add new presets config option (#2474)
• Scaffold new tailwind.config.js files with available future flags commented out (#2379)
• Add col-span-full and row-span-full (#2471)
• Make outline configurable, outline-none more accessible by default, and add outline-black and outline-white (#2460)
• Add additional small rotate and skew values (#2528)
• Add xl, 2xl, and 3xl border radius values (#2529)
• Add new utilities for grid-auto-columns and grid-auto-rows (#2531)
• Promote defaultLineHeights and standardFontWeights from experimental to future

Fixed

• Don't escape keyframe values (#2432)
• Use word-wrap instead of overflow-wrap in ie11 target mode (#2391)

Experimental

• Add experimental 2xl breakpoint (#2468)
• Rename {u}-max-content and {u}-min-content utilities to {u}-max and {u}-min in experimental extended spacing scale (#2532)
• Support disabling dark mode variants globally (#2530)

Tailwind CSS v1.8

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

New features

• New font-variant-numeric utilities (#2305)
• New place-items, place-content, place-self, justify-items, and justify-self utilities (#2306)
• New preserveHtmlElements option for purge (#2283)
• New layers mode for purge (#2288)
• Support configuring variants as functions (#2309)
• Dark mode variant (experimental) (#2279)

Changes

• CSS within @layer at-rules are now grouped with the corresponding @tailwind at-rule (#2312)

Deprecations

• The conservative purge mode has been deprecated in favor of the new layers mode (#2288)

Check out the full release notes on GitHub for more details.

Tailwind CSS v1.7

Tailwind CSS v1.7 is now available with gradients, background-clip support, a new experimental version of @apply that works with any class (!), and tons more:

New features

• Gradients
• New background-clip utilities
• New gap utility aliases
• New contents display utility
• Default letter-spacing per font-size
• Divide border styles
• Access entire config object from plugins
• Define colors as closures

Deprecations

• Deprecated gap utilities

Experimental features

• Use @apply with variants and other complex classes
• New color palette
• Extended spacing scale
• Default line-heights per font-size by default
• Extended font size scale

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

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.