v1.7.0

Tailwind v1.7.0

Another new Tailwind release is here! This one sort of came out of nowhere and is loaded with exciting stuff (especially down in the experiments section...)

Let's dig in!

• 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

New features

Gradients

#2176

The big one for this release — Tailwind now ships with built-in support for background gradients!

Gradients are designed with a highly composable API that lets you specify up to three color stops in one of 8 directions by default:

<div class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">
  <!-- ... -->
</div>

This is made possible by a new backgroundImage core plugin (which you can use for any background images you like!) and a new gradientColorStops core plugin.

The default configuration for these plugins looks like this:

// tailwind.config.js
module.exports = {
  theme: {
    backgroundImage: {
      'gradient-to-t': 'linear-gradient(to top, var(--gradient-color-stops))',
      'gradient-to-tr': 'linear-gradient(to top right, var(--gradient-color-stops))',
      'gradient-to-r': 'linear-gradient(to right, var(--gradient-color-stops))',
      'gradient-to-br': 'linear-gradient(to bottom right, var(--gradient-color-stops))',
      'gradient-to-b': 'linear-gradient(to bottom, var(--gradient-color-stops))',
      'gradient-to-bl': 'linear-gradient(to bottom left, var(--gradient-color-stops))',
      'gradient-to-l': 'linear-gradient(to left, var(--gradient-color-stops))',
      'gradient-to-tl': 'linear-gradient(to top left, var(--gradient-color-stops))',
    },
    gradientColorStops: (theme) => theme('colors'),
  },
  variants: {
    backgroundImage: ['responsive'],
    gradientColorStops: ['responsive', 'hover', 'focus'],
  },
}

Learn more the original pull request.

New background-clip utilities

#2168

We've also added a new backgroundClip core plugin that you can use to control how background are rendered within an element.

It includes 4 new utilities:

Class	CSS
bg-clip-border	background-clip: border-box
bg-clip-padding	background-clip: padding-box
bg-clip-content	background-clip: content-box
bg-clip-text	background-clip: text

Combined with the new gradient features, you can use this to do cool gradient text stuff like this:

<h1 class="text-6xl font-bold">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
    Greetings from Tailwind v1.7.
  </span>
</h1>

Only responsive variants are enabled for the backgroundClip plugin by default:

// tailwind.config.js
module.exports = {
  variants: {
    backgroundClip: ['responsive'],
  },
}

New gap utility aliases

#2137

For some dumb reason I named the column-gap and row-gap utilities col-gap-{n} and row-gap-{n} respectively, which isn't terrible but it's not consistent with how other things in Tailwind are named.

I was finding myself getting them wrong all the time — is row-gap the gaps in a row, or the gap between rows?

Tailwind v1.7 introduces new gap-x-{n} and gap-y-{n} utilities that do the exact same thing but have names that don't suck. They make way more sense than the actual CSS names now that gap for flexbox is starting to roll out too, since flexbox has no "columns".

These utilities will replace the old ones in v2.0, but for now they both exist together.

We recommend migrating to the new names now, and disabling the old names using this feature flag:

// tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  // ...
}

Tailwind will issue a warning in the console to remind you that you are including deprecated classes in your build until you enable this flag.

New contents display utility

#2023

We've added a new contents class for the recent display: contents CSS feature.

<div class="flex">
  <div><!-- ... --></div>
  <!-- This container will act as a phantom container, and its children will be treated as part of the parent flex container -->
  <div class="contents">
    <div><!-- ... --></div>
    <div><!-- ... --></div>
  </div>
  <div><!-- ... --></div>
</div>

Learn more about it in this great article by Rachel Andrew.

Default letter-spacing per font-size

#1915

You can now configure a default letter-spacing value for each font-size in your tailwind.config.js theme, using a tuple syntax:

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      2xl: ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      3xl: ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}

This new syntax is supported in addition to the simpler [{fontSize}, {lineHeight}] syntax that was recently introduced.

Divide border styles

#1965

We've added utilities for setting the border style on the divide utilities:

<div class="divide-y divide-dashed">
  <div><!-- ... --></div>
  <div><!-- ... --></div>
  <div><!-- ... --></div>
  <div><!-- ... --></div>
</div>

These utilities include responsive variants by default:

// tailwind.config.js
module.exports = {
  variants: {
    divideStyle: ['responsive'],
  },
}

Access entire config object from plugins

#1583

The config function passed to the plugin API now returns the entire config option when invoked with no arguments:

tailwind.plugin(function ({ config, addUtilities, /* ... */ })) {
  // Returns entire config object
  config()
})

Define colors as closures

#1676

You can now define your colors as callbacks, which receive a bag of parameters you can use to generate your color value.

This is particularly useful when trying to make your custom colors work with the backgroundOpacity, textOpacity, etc. utilities

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${variable}, 1))`,
    },
  },
}

Currently the only thing passed through is an opacityVariable property, which contains the name of the current opacity variable (--background-opacity, --text-opacity, etc.) depending on which plugin is using the color.

Deprecations

Tailwind v1.7 introduces a new feature flagging and deprecation system designed to make upgrades as painless as possible.

Any time we deprecate functionality or introduce new (stable) breaking changes, they will be available in Tailwind v1.x under a future property in your tailwind.config.js file.

Whenever there are deprecations or breaking changes available, Tailwind will warn you in the console on every build until you adopt the new changes and enable the flag in your config file:

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes

You can opt-in to a breaking change by setting that flag to true in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
}

If you'd prefer not to opt-in but would like to silence the warning, explicitly set the flag to false:

// tailwind.config.js
module.exports = {
  future: {
...

v1.6.3

• Fixes issue where motion-safe and motion-reduce variants didn't stack correctly with group-hover variants

v1.6.2

• Fixes issue where @keyframes respecting the important option would break animations in Chrome

v1.6.1

• Fixes an issue where animation keyframes weren't included in the build without @tailwind base (#2108)

v1.6.0

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 😘

New Features

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

Animation support (#2068)

Tailwind CSS v1.6 adds a brand new animation core plugin, with 4 general purpose animations included out of the box:

• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

These are completely customizable as always, using the animation and keyframes sections of your tailwind.config.js theme:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
    },
  },
}

For more information and a live demo, read the new animation documentation. For behind the scenes details about the design rationale, check out the pull request.

New prefers-reduced-motion variants (#2071)

To go along with the new animation features, we've also added new motion-safe and motion-reduce variants that allow you to conditionally apply CSS based on the prefers-reduced-motion media feature.

These can be useful in conjunction with transition and animation utilities to disable problematic motion for users who are sensitive to it:

<div class="... transition duration-150 ease-in-out motion-reduce:transition-none ..."></div>

...or to explicitly opt-in to motion to make sure it's only being shown to users who haven't opted out:

<div class="... motion-safe:transition duration-150 ease-in-out ..."></div>

These can be combined with responsive variants and pseudo-class variants as well:

<!-- With responsive variants -->
<div class="sm:motion-reduce:translate-y-0"></div>

<!-- With pseudo-class variants -->
<div class="motion-reduce:hover:translate-y-0"></div>

<!-- With responsive and pseudo-class variants -->
<div class="sm:motion-reduce:hover:translate-y-0"></div>

These are currently not enabled for any utilities by default, but you can enabled them as needed in the variants section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    translate: ['responsive', 'hover', 'focus', 'motion-safe', 'motion-reduce'],
  },
}

For more details, check out the updated variants documentation.

New overscroll-behavior utilities (#2075)

We've also added new utilities for the overscroll-behavior property.

You can use these utilities to control how "scroll chaining" works in your sites, and avoid scrolling the whole page when you reach the top or bottom of an embedded scrollable area.

<div class="overscroll-y-contain ...">
  <!-- ... -->
</button>

Note that this is currently not supported in Safari, but in my opinion it's not a huge deal to treat this as a progressive enhancement anyways, since it falls back fairly gracefully.

This plugin can be configured in your tailwind.config.js file as overscrollBehavior:

// tailwind.config.js
module.exports = {
  // ...

  // Disabling the plugin
  corePlugins: {
    overscrollBehavior: false,
  },

  // Customizing the enabled variants
  variants: {
    overscrollBehavior: ['responsive', 'hover'],
  },
}

Generate your CSS without an input file (#1861)

If you never write any custom CSS and you're sick of creating this file all the time...

@tailwind base;
@tailwind components;
@tailwind utilities;

...then I've got news for you baby — if you're using our tailwindcss CLI tool you can start depositing those 58 characters into your savings account instead of wasting them on a pointless CSS file.

The input file argument is now optional in the CLI tool, so if you don't actually need a custom CSS file, you can just write this:

npx tailwindcss build -o compiled.css

Your kids are going to be so grateful for the extra time you get to spend together ❤️

v1.5.2

• Fixes issue where you could no longer use @apply with unprefixed class names if you had configured a prefix

v1.5.1

• Fixes accidental breaking change where adding component variants using the old manual syntax (as recommended in the docs) stopped working

v1.5.0

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. Enjoy! 🥳

No breaking changes, this is a minor release and we are professionals you silly goose. One accidental breaking change, fixed in v1.5.1. I take back everything I said about being professionals. I am the one who is the silly goose.

New Features

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

Component variants support (#2031)

Until Tailwind CSS v1.5.0, only "utility" classes were really intended to be used with variants (like "responsive", "hover", "focus", etc.)

While these are still much more useful for utilities than any other type of class, we now support generating variants for component classes as well, like the prose classes in the new @tailwindcss/typography plugin:

<article class="prose md:prose-lg">
  <!-- Content -->
</article>

You can take advantage of this feature in your own component classes by using the new variants option in the second argumant of the addComponents plugin API:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, {
    variants: ['responsive']
  })
})

...or using the array shorthand you might be familiar with from the addUtilities API:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, ['responsive'])
})

To take advantage of these feature in your custom CSS (rather than using the plugin API), you can use a new @layer directive to explicitly tell Tailwind that your styles belong to the "components" bucket:

@layer components {
  @responsive {
    .card {
      /* ... */
    }
  }
}

This helps Tailwind purge your unused CSS correctly, ensuring it doesn't remove any responsive component variants when using the default "conservative" purge mode.

Responsive container variants (#2032)

Piggy-backing off of the new component variants support, the container class now supports variants!

<!-- Only lock the width at `md` sizes and above -->
<div class="md:container">
  <!-- ... -->
</div>

We've enabled responsive variants by default, but if you are sick in the head you can also manually enable other variants like focus, group-hover, whatever:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    container: ['responsive', 'focus', 'group-hover'],
  },
}

New focus-visible variant (#1824)

We've added support for the :focus-visible pseudo-class using a new focus-visible variant.

This is super useful for adding focus styles that only appear to keyboard users, and are ignored for mouse users:

<button class="focus-visible:outline-none focus-visible:shadow-outline ...">
  Click me
</button>

It's not enabled for anything by default, but you can enable it in the variants section of your config file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'focus-visible'],
  },
}

Browser support is still pretty weak on this but getting better. In the mean time, check out the polyfill and corresponding PostCSS plugin if you'd like to use this in all browsers right away.

New checked variant (#1285)

We've added a new checked variant you can use to conditionally style things like checkboxes and radio buttons:

<input type="checkbox" class="bg-white checked:bg-blue-500" />

It's not enabled for anything by default, but you can enable it in the variants section of your config file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
  },
}

v1.4.6

• Explicitly error when using a class as the important config option instead of just generating the wrong CSS (ad850ac)

v1.4.5

• Fix bug where the divideColor plugin was using the wrong variants in IE11 target mode