v1.8.0

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
  • New grid alignment utilities
  • New preserveHtmlElements option for purge
  • New layers mode for purge
  • Support configuring variants as functions
  • Dark mode (experimental)
• Changes
  • @layer rules are now grouped together
• Deprecations
  • conservative purge mode deprecated in favor of layers

New features

New font-variant-numeric utilities (#2305)

We've added a new composable API for the font-variant-numeric property, so now you can finally do the whole tabular-nums thing!

Here's what's been added:

Class	Description
normal-nums	Reset font-variant-numeric to normal
ordinal	Enables the ordinal feature
slashed-zero	Enables the slashed-zero feature
lining-nums	Enables the lining-nums feature
oldstyle-nums	Enables the oldstyle-nums feature
proportional-nums	Enables the proportional-nums feature
tabular-nums	Enables the tabular-nums feature
diagonal-fractions	Enables the diagonal-fractions feature
stacked-fractions	Enables the stacked-fractions feature

The exciting thing about how these are implemented is that they are composable in your HTML, so you can enable multiple font-variant-numeric features by adding multiple classes:

<p class="slashed-zero tabular-nums diagonal-fractions">12345</p>

The normal-nums class can be used to reset things, usually used at a particular breakpoint:

<p class="slashed-zero tabular-nums diagonal-fractions md:normal-nums">12345</p>

By default, only responsive variants are enabled for this new core plugin.

New grid alignment utilities (#2306)

We've added a bunch of new utilities for the place-items, place-content, place-self, justify-items, and justify-self properties!

Here's a complete list of what has been added:

Core plugin	Class	CSS
justifyItems	justify-items-auto	justify-items: auto
justifyItems	justify-items-start	justify-items: start
justifyItems	justify-items-end	justify-items: end
justifyItems	justify-items-center	justify-items: center
justifyItems	justify-items-stretch	justify-items: stretch
justifySelf	justify-self-auto	justify-self: auto
justifySelf	justify-self-start	justify-self: start
justifySelf	justify-self-end	justify-self: end
justifySelf	justify-self-center	justify-self: center
justifySelf	justify-self-stretch	justify-self: stretch
placeContent	place-content-center	place-content: center
placeContent	place-content-start	place-content: start
placeContent	place-content-end	place-content: end
placeContent	place-content-between	place-content: space-between
placeContent	place-content-around	place-content: space-around
placeContent	place-content-evenly	place-content: space-evenly
placeContent	place-content-stretch	place-content: stretch
placeItems	place-items-auto	place-items: auto
placeItems	place-items-start	place-items: start
placeItems	place-items-end	place-items: end
placeItems	place-items-center	place-items: center
placeItems	place-items-stretch	place-items: stretch
placeSelf	place-self-auto	place-self: auto
placeSelf	place-self-start	place-self: start
placeSelf	place-self-end	place-self: end
placeSelf	place-self-center	place-self: center
placeSelf	place-self-stretch	place-self: stretch

By default, responsive variants are generated for each of these new core plugins.

New preserveHtmlElements option for purge (#2283)

Tailwind v1.8 introduces a new preserveHtmlElements option to the purge configuration that allows you to safelist all plain HTML elements, like p, blockquote, body, video, etc.

// tailwind.config.js
module.exports = {
  purge: {
    content: [
      // Paths...
    ],
    preserveHtmlElements: true,
  },
}

This helps avoid accidentally purging things like heading elements when your source files are in a format that compiles to HTML, like markdown (since your markdown won't actually contain the string h1 anywhere).

This option is set to true by default.

New layers mode for purge (#2288)

We've introduced a new layers purge mode and made it the default, deprecating the existing conservative mode.

When configured manually, it looks like this:

// tailwind.config.js
module.exports = {
  purge: {
    mode: 'layers',
    layers: ['base', 'components', 'utilities'],
    content: [
      // Paths...
    ],
  },
}

It allows you to tell Tailwind which layers it should purge (base, components, and/or utilities). The old conservative mode was the equivalent of this:

// tailwind.config.js
module.exports = {
  purge: {
    mode: 'layers',
    layers: ['utilities'],
    content: [
      // Paths...
    ],
  },
}

This is a breaking change (although it probably won't actually affect you), so to make it the default you'll have to opt-in behind the purgeLayersByDefault flag:

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

Support configuring variants as functions (#2309)

Adding new variants to a core plugin is annoying right? You have to remember to list all of the existing variants, instead of just specying the new ones you want to add. Completely unacceptable!

Tailwind CSS v1.8 makes it possible to configure variants as functions so you can leverage some helpful utilities we expose to you that make it easy to extend the variant configuration instead of having to re-write the entire list:

// tailwind.config.js
module.exports = {
  variants: {
    opacity: ({ before }) => before(['group-hover'], 'hover'),
  },
}

Read the pull request for all of the details.

Dark mode (experimental) (#2279)

Oh yeah I almost forgot, we added dark mode.

<div class="bg-white text-black dark:bg-black dark:text-white dark:hover:text-gray-300"></div>

It's stackable with both responsive variants and pseudo-class variants, so you can use classes like lg:dark:focus:text-white no problem.

It can be configured to use a prefers-color-scheme media query or a parent class (.dark), whichever you prefer:

module.exports = {
  dark: 'media', // or 'class'
  experimental {
    darkModeVariant: true,
  }
}

It's enabled for backgroundColor, borderColor, divideColor, textColor, gradientColorStops, and placeholderColor by default.

It's experimental right now, so enable it using the darkModeVariant experimental flag:

// tailwind.config.js
module.exports = {
  experimental: {
    darkModeVariant: true,
  },
  // ...
}

Let us know how it works for you and if there's anything we can improve before we tag it as stable!

Changes

@layer rules are now grouped together (#2312)

Any custom CSS defined within a @layer at-rule that matches one of Tailwind's layers is now grouped together with the corresponding Tailwind rules.

For example, this CSS:

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

@layer components {
  .btn {
    background: blue;
  }
}

@layer utilities {
  .align-banana {
    text-align: banana;
  }
}

@layer base {
  h1 {
    font-weight: bold;
  }
}

@layer components {
  .card {
    border-radius: 12px;
  }
}

@layer base {
  p {
    font-weight: normal;
  }
}

@lay...

v1.7.6

• Fix bug where the new experimental @apply implementation broke when applying a variant class with the important option globally enabled

v1.7.5

• Update lodash to latest to silence security warnings

v1.7.4

• Fix bug where the new applyComplexClasses experiment didn't behave as expected with rules with multiple selectors, like .foo, .bar { color: red }
• Make @apply insensitive to whitespace in the new applyComplexClasses experiment
• Add new -p flag to CLI to quickly scaffold a postcss.config.js file

v1.7.3

• Fix bug that prevented defining colors as closures when the gradientColorStops plugin was enabled
• Log feature flag notices to stderr instead of stdout to preserve compatibility with pipe-based build systems
• Add missing bg-none utility for disabling background images

v1.7.2

• Reuse generated CSS as much as possible in long-running processes instead of needlessly recalculating

v1.7.1

• Don't issue duplicate flag notices in long-running build processes

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