v1.8.8

Fixed

• Register dark mode plugin outside of resolveConfig code path (#2368)

v1.8.7

Fixed

• Fix issue where classes in escaped strings (like class=\"block\") weren't extracted properly for purging (#2364)

v1.8.6

Fixed

• Fix issue where container padding not applied when using object syntax (#2353)

v1.8.5

Fixed

• Fix issue where resolveConfig didn't take into account configs added by feature flags (#2347)

v1.8.4

Fixed

• Fix issue where inserting extra PurgeCSS control comments could break integrated PurgeCSS support
• Fix issue where dark variant in 'class' mode was incompatible with 'group-hover' variant (#2337)
• Support basic nesting structure with @apply when using the applyComplexClasses experiment (#2271)

Changed

• Rename font-hairline and font-thin to font-thin and font-extralight behind standardFontWeights flag (experimental until v1.9.0) (#2333)

v1.8.3

Fixed

• Fix issue where font-variant-numeric utilities would break in combination with most CSS minifier configurations (f3660ce)
• Only warn about conservative purge mode being deprecated once per process (58781b5)

v1.8.2

• Fix bug where dark mode variants would cause an error if you had a plugins array in your config (#2322)

v1.8.1

• Fix bug in the new font-variant-numeric utilities which broke the whole rule
• Fix bug while purging

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