Tailwind CSS v1.4.0

Another new minor version so soon? Merry Coronavirus 🎄😷🎄

New Features

• New color opacity utilities
• Built-in PurgeCSS
• IE 11 target mode (experimental)

New color opacity utilities (#1627)

Tailwind v1.4 adds a new set of utilities for controlling just the alpha channel of colors:

• bg-opacity-{value}
• text-opacity-{value}
• border-opacity-{value}
• divide-opacity-{value}
• placeholder-opacity-{value}

These utilities compose with the existing color utilities like this:

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

All of these new utilities inherit their values from the opacity config by default but can be configured independently under the following theme keys:

• backgroundOpacity
• textOpacity
• borderOpacity
• placeholderOpacity
• divideOpacity

Learn more in the pull request.

Built-in PurgeCSS (#1639)

Tailwind v1.4 adds a new purge option to the config for removing unused CSS without the need for configuring another tool:

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

Learn more in the pull request and the updated "Controlling File Size" documentation.

IE 11 target mode (#1635)

This feature is experimental and may change outside of normal semantic versioning policies.

Recently we've been adding a lot of new features to Tailwind that aren't IE 11 compatible, and if you need to support IE 11 in your projects you have to be careful not to rely on these features by mistake.

To make this easier, we've added a new target option to the config that lets you opt-in to a new ie11 mode that disables any features that are not compatible with IE 11:

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

Learn more in the pull request.