Tailwind CSS v1.5.0 — Release Notes & Engineering Impact

# 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](https://github.com/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](#component-variants-support) - [Responsive `container` variants](#responsive-container-variants) - [New `focus-visible` variant](#new-focus-visible-variant) - [New `checked` variant](#new-checked-variant) <a name="component-variants-support"></a> ### 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: ```html <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: ```js plugin(function ({ addComponents })) { addComponents({ '.card': { // ... } }, { variants: ['responsive'] }) }) ``` ...or using the array shorthand you might be familiar with from the `addUtilities` API: ```js 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. <a name="responsive-container-variants"></a> ### Responsive `container` variants (\#2032) Piggy-backing off of the new component `variants` support, the `container` class now supports variants! ```html <!-- 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: ```js // tailwind.config.js module.exports = { // ... variants: { container: ['responsive', 'focus', 'group-hover'], }, } ``` <a name="new-focus-visible-variant"></a> ### New `focus-visible` variant (\#1824) We've added support for the [`:focus-visible` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) 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: ```html <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: ```js // 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](https://github.com/WICG/focus-visible) and corresponding [PostCSS plugin](https://github.com/csstools/postcss-focus-visible) if you'd like to use this in all browsers right away. <a name="new-checked-variant"></a> ### New `checked` variant (\#1285) We've added a new `checked` variant you can use to conditionally style things like checkboxes and radio buttons: ```html <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: ```js // tailwind.config.js module.exports = { // ... variants: { backgroundColor: ['responsive', 'hover', 'focus', 'checked'], }, } ```