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:

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:

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;
  }
}

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

...conceptually becomes this:

@tailwind base;
h1 {
  font-weight: bold;
}
p {
  font-weight: normal;
}

@tailwind components;
.btn {
  background: blue;
}
.card {
  border-radius: 12px;
}

@tailwind utilities;
.align-banana {
  text-align: banana;
}
.align-sandwich {
  text-align: sandwich;
}

This is useful for avoiding CSS declaration order specificity issues and lets you decouple authoring order from intended render order. This is generally inline with the new @layer CSS proposal that came out shortly after we introduced this at-rule to Tailwind ourselves without knowing that existed, heh.

This is a change in behavior to how things worked before but we don't document the @layer rule outside of mentioning it in the release notes for Tailwind 1.6. I am going to be a bit bold and classify this as a bugfix, as this is how this always should have worked. Basically a zero percent chance this will break anything for anyone.

Deprecations

conservative purge mode deprecated in favor of layers (#2288)

The new layers mode replaces the old conservative mode and will be the default in v2.0. You'll get a console warning until you update this value in your config file.

If you want to update without any changes in behavior, use this configuration:

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