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

What Is New in Tailwind CSS 3.2

How do I use multiple Tailwind config files in a single project?

You can target a specific Tailwind configuration per stylesheet by adding the @config directive at the top of the CSS file.

This makes it trivial to keep an admin panel and a public-facing UI on separate design systems without juggling webpack hacks.

• Create tailwind.admin.config.js and tailwind.client.config.js with their own theme extensions.
• Reference the desired config in each entry CSS file.

@config "./tailwind.admin.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

When you run npm install -D tailwindcss@latest the compiler will read the appropriate config for each file automatically.

What are dynamic breakpoints and how can I use max-* variants?

Dynamic breakpoints let you write min- and max-width media queries directly in class names, removing the need for manual undo rules.

Tailwind now ships a max-* variant that mirrors your screens configuration, so max-lg:p-8 applies padding up to the lg breakpoint.

• Combine min-[720px]: and max-[1024px]: for precise ranges.
• Works only with a simple screens object (string values).

<div class="max-lg:p-8">Content</div>
<div class="min-[712px]:max-[877px]:right-16">Box</div>

This matters if you need to hide an element on large screens without writing a separate xl:hidden rule.

How can I style elements based on ARIA, data, or CSS supports features?

Tailwind 3.2 adds aria-*, data-* and supports-* variants so utilities can react to attribute state or browser feature support.

Use square-bracket syntax for arbitrary values, or rely on the built-in boolean modifiers for common ARIA attributes.

• ARIA example: aria-checked:bg-blue-600 changes background when aria-checked="true".
• Data example: data-[size=large]:p-8 applies padding only when data-size="large".
• Supports example: supports-[display:grid]:grid enables grid layout only if the browser supports it.

<span class="bg-gray-600 aria-checked:bg-blue-600" aria-checked="true" role="checkbox">Toggle</span>
<div data-size="large" class="data-[size=large]:p-8">Large Box</div>
<div class="flex supports-[display:grid]:grid">Layout</div>

Watch out for typo-sensitive attribute names; Tailwind generates the selector exactly as you write it.

How do container queries work in Tailwind CSS 3.2?

Container queries are now available through the official @tailwindcss/container-queries plugin, using the @ prefix to differentiate them from media queries.

Declare a container with @container and then apply utilities inside it with @lg:flex or arbitrary values like @[618px]:flex.

• Default container sizes match the max-width scale (xs, sm, md, ..., 7xl).
• Custom sizes can be added under the containers key in tailwind.config.js.
• Named containers use the same modifier syntax as group-* (e.g., @container/main and @lg/main:flex).

<div class="@container">
  <div class="block @lg:flex">Responsive</div>
</div>

This matters if you build component libraries that need to adapt to the size of their parent rather than the viewport.

How can I create custom dynamic variants with matchVariant?

The new matchVariant plugin API lets you define arbitrary variants such as placement-* or min-[value] on the fly.

Inside a plugin you call matchVariant(name, generator, options) where generator returns a selector string based on the supplied value.

• Provide a values map for common shortcuts.
• Use the optional sort function to control CSS ordering.

let plugin = require('tailwindcss/plugin');
module.exports = {
  plugins: [
    plugin(function({ matchVariant }) {
      matchVariant('placement', value => `&[data-placement=${value}]`, {
        values: { t: 'top', r: 'right', b: 'bottom', l: 'left' },
      });
    })
  ],
};

In practice you can now write placement-t:bg-red-500 or placement-[top-start]:mb-2 without adding a new utility class each time.