Tailwind CSS 1.8: What's New, Release History & EOL Status

What Is New in Tailwind CSS 1.8

How can I use the new font-variant-numeric utilities for better typographic control?

Tailwind 1.8 adds composable font-variant-numeric utilities that let you toggle individual OpenType features directly in your markup.

• tabular-nums - aligns numbers in tables.
• slashed-zero - shows a slash through zero.
• ordinal, oldstyle-nums, proportional-nums, etc.

These classes are composable, so you can combine them:

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

Use normal-nums to reset at a breakpoint:

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

What grid alignment utilities does Tailwind 1.8 introduce and how do I apply them?

The release adds a full set of place-* and justify-* utilities for aligning items, content, and self within CSS Grid and Flexbox.

• justify-items-start, justify-items-center, justify-items-stretch, etc.
• place-content-between, place-content-evenly, place-self-end, and more.

All new utilities generate responsive variants out of the box:

<div class="grid place-items-center md:place-items-start">
  <div class="justify-self-end">Item</div>
</div>

How has the purge configuration changed with the new layers mode and preserveHtmlElements option?

Purge now defaults to "layers" mode and you can enable preserveHtmlElements to automatically safelist raw HTML tags.

// tailwind.config.js
module.exports = {
  purge: {
    mode: 'layers',
    layers: ['base', 'components', 'utilities'],
    preserveHtmlElements: true,
    content: ['./src/**/*.html'],
  },
}

This prevents accidental removal of elements like h1 when source files compile from markdown or other templating languages.

How do I enable experimental dark mode and what utilities does it affect?

Set dark to 'media' or 'class' and turn on the darkModeVariant flag to get dark: prefixed variants.

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

By default it works with backgroundColor, borderColor, divideColor, textColor, gradientColorStops, and placeholderColor:

<div class="bg-white text-black dark:bg-black dark:text-white">...</div>

How can I extend variant lists using functions in Tailwind 1.8?

You can provide a function to the variants key that receives a helper and returns an augmented array.

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

The before helper inserts the new variant before the existing list, letting you add without rewriting the whole array.