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

What Is New in Tailwind CSS 1.4

How can I control the opacity of colors with Tailwind CSS 1.4?

Tailwind 1.4 introduces dedicated opacity utilities that let you adjust the alpha channel of background, text, border, divide, and placeholder colors.

These utilities follow the pattern bg-opacity-{value}, text-opacity-{value}, border-opacity-{value}, divide-opacity-{value}, and placeholder-opacity-{value}. They compose with any existing color class:

<div class="bg-red-500 bg-opacity-25">
  
</div>

Values are drawn from the opacity scale in your theme, but you can override each category independently via backgroundOpacity, textOpacity, borderOpacity, divideOpacity, and placeholderOpacity in the theme section.

How do I remove unused CSS without a separate tool in Tailwind 1.4?

Tailwind 1.4 ships a built-in PurgeCSS integration that scans your source files and strips unused classes at build time.

Configure the purge array in tailwind.config.js with glob patterns that match the files where you use Tailwind classes:

// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

When you run your build (e.g., via PostCSS), Tailwind will automatically generate a minimal stylesheet, reducing file size dramatically.

How can I make Tailwind 1.4 generate IE 11-compatible CSS?

Set the target option to ie11 in your tailwind.config.js to disable features that IE 11 cannot handle.

This experimental mode turns off utilities that rely on modern CSS features such as custom properties or newer selectors, giving you a safe baseline for legacy browsers:

// tailwind.config.js
module.exports = {
  target: 'ie11',
  theme: {},
  variants: {},
  plugins: [],
}

Watch out for plugins that assume full feature support; they may need adjustments or conditional loading when IE 11 mode is active.