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

What Is New in Tailwind CSS 3.1

How does Tailwind CSS 3.1 improve TypeScript integration?

Tailwind CSS 3.1 ships first-party TypeScript definitions for the entire configuration API.

In practice you add a JSDoc comment above your module.exports in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [/* ... */],
  theme: { extend: {} },
  plugins: [],
};

This gives you autocomplete, type-checking, and instant feedback in IDEs without extra packages.

What new utilities and variants does Tailwind CSS 3.1 add?

Version 3.1 introduces several utilities and pseudo-class variants that cover common UI patterns.

• Border-spacing utilities (border-spacing-{size}) for border-collapse: separate tables.
• enabled: and optional: variants to conditionally apply styles based on form element state.
• contrast-more: and contrast-less: variants that respond to the prefers-contrast media query.
• backdrop: modifier for styling the ::backdrop of native <dialog> elements.

Example of a sticky table header using the new border-spacing utilities:

<table class="border-separate border-spacing-0">
  <thead class="bg-gray-50">
    <tr>
      <th class="sticky top-0 border-b border-gray-300">Name</th>
      <th class="sticky top-0 border-b border-gray-300">Email</th>
    </tr>
  </thead>
  ...
</table>

How can I use the theme() function with opacity and CSS variables in Tailwind CSS 3.1?

The theme() function now accepts the slash syntax to adjust alpha channels, and color definitions can be expressed as CSS-variable strings with an <alpha-value> placeholder.

Adjusting opacity directly in CSS:

.card {
  background-color: theme(colors.gray.100 / 60%);
}

Defining a color that respects opacity utilities:

module.exports = {
  theme: {
    colors: {
      primary: "rgb(var(--color-primary) / )",
    },
  },
};

Now bg-primary/50 will render as rgb(var(--color-primary) / 0.5) without extra functions.

How does the new CLI support for CSS imports affect my build workflow?

The Tailwind CLI now bundles postcss-import out of the box, letting you split your stylesheet into logical files without extra configuration.

Typical entry file:

@import "tailwindcss/base";
@import "./components/buttons.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

If you run npx tailwindcss -i ./src/main.css -o ./dist/output.css --watch, the imports are resolved automatically, which is especially handy for zero-dependency environments.

How do arbitrary variants work in Tailwind CSS 3.1?

Arbitrary variants let you write any selector logic directly in the class attribute, bypassing the need for a custom plugin.

Example targeting the third child:

<div class="[&:nth-child(3)]:py-0">...</div>

You can also combine feature queries:

<div class="bg-white [@supports(backdrop-filter:blur(0))]:bg-white/50 [@supports(backdrop-filter:blur(0))]:backdrop-blur">...</div>

This provides a powerful escape hatch for edge-case styling while keeping your HTML declarative.