v1.5.2

• Fixes issue where you could no longer use @apply with unprefixed class names if you had configured a prefix

v1.5.1

• Fixes accidental breaking change where adding component variants using the old manual syntax (as recommended in the docs) stopped working

v1.5.0

Tailwind CSS v1.5.0

I was hoping to save v1.5.0 for something really exciting (🌘) but we needed a new feature to support the new @tailwindcss/typography plugin so h*ck it, we're dropping some new stuff on you early. Enjoy! 🥳

No breaking changes, this is a minor release and we are professionals you silly goose. One accidental breaking change, fixed in v1.5.1. I take back everything I said about being professionals. I am the one who is the silly goose.

New Features

• Component variants support
• Responsive container variants
• New focus-visible variant
• New checked variant

Component variants support (#2031)

Until Tailwind CSS v1.5.0, only "utility" classes were really intended to be used with variants (like "responsive", "hover", "focus", etc.)

While these are still much more useful for utilities than any other type of class, we now support generating variants for component classes as well, like the prose classes in the new @tailwindcss/typography plugin:

<article class="prose md:prose-lg">
  <!-- Content -->
</article>

You can take advantage of this feature in your own component classes by using the new variants option in the second argumant of the addComponents plugin API:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, {
    variants: ['responsive']
  })
})

...or using the array shorthand you might be familiar with from the addUtilities API:

plugin(function ({ addComponents })) {
  addComponents({
    '.card': {
      // ...
    }
  }, ['responsive'])
})

To take advantage of these feature in your custom CSS (rather than using the plugin API), you can use a new @layer directive to explicitly tell Tailwind that your styles belong to the "components" bucket:

@layer components {
  @responsive {
    .card {
      /* ... */
    }
  }
}

This helps Tailwind purge your unused CSS correctly, ensuring it doesn't remove any responsive component variants when using the default "conservative" purge mode.

Responsive container variants (#2032)

Piggy-backing off of the new component variants support, the container class now supports variants!

<!-- Only lock the width at `md` sizes and above -->
<div class="md:container">
  <!-- ... -->
</div>

We've enabled responsive variants by default, but if you are sick in the head you can also manually enable other variants like focus, group-hover, whatever:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    container: ['responsive', 'focus', 'group-hover'],
  },
}

New focus-visible variant (#1824)

We've added support for the :focus-visible pseudo-class using a new focus-visible variant.

This is super useful for adding focus styles that only appear to keyboard users, and are ignored for mouse users:

<button class="focus-visible:outline-none focus-visible:shadow-outline ...">
  Click me
</button>

It's not enabled for anything by default, but you can enable it in the variants section of your config file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'focus-visible'],
  },
}

Browser support is still pretty weak on this but getting better. In the mean time, check out the polyfill and corresponding PostCSS plugin if you'd like to use this in all browsers right away.

New checked variant (#1285)

We've added a new checked variant you can use to conditionally style things like checkboxes and radio buttons:

<input type="checkbox" class="bg-white checked:bg-blue-500" />

It's not enabled for anything by default, but you can enable it in the variants section of your config file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
  },
}

v1.4.6

• Explicitly error when using a class as the important config option instead of just generating the wrong CSS (ad850ac)

v1.4.5

• Fix bug where the divideColor plugin was using the wrong variants in IE11 target mode

v1.4.4

• Fix bug where target: 'browserslist' didn't work, only target: ['browserslist', {...}] did (f5c0e30)

v1.4.3

• Don't generate unnecessary CSS in color plugins when color opacity utilities are disabled (#1680)

v1.4.2

• Fix issue where purge: { enabled: false } was ignored, add purge: false shorthand

v1.4.1

• Improve built-in PurgeCSS extractor to better support Haml and Slim templates (cdef9c8, 9032ff3)

v1.4.0

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.