Tailwind CSS v1.1.0 — Release Notes & Engineering Impact

# Tailwind CSS v1.1 The first new feature release since v1.0 has arrived! Tailwind v1.1 includes a bunch of new stuff, but I think the things you'll probably be most excited about are: - [New screenreader visibility utilities](#added-utilities-for-screenreader-visibility) - [New utilities for setting the placeholder color on form elements](#added-utilities-for-placeholder-color) - [New variants for `first-child`, `last-child`, `nth-child(odd)`, and `nth-child(even)`](#first-last-even-and-odd-child-variants) **Important note** — although this is a minor release, it includes two bug fixes that may have a superficial impact on how your site looks if you are using horizontal rules in your site or are relying on the default placeholder color defined in Tailwind's base styles. Be sure to read through the [fixes](#fixes) section before upgrading to understand the impact. ## Changes - [New features](#new-features) - [Added utilities for screenreader visibility](#added-utilities-for-screenreader-visibility) - [Added utilities for placeholder color](#added-utilities-for-placeholder-color) - [First, last, even, and odd child variants](#first-last-even-and-odd-child-variants) - [Disabled variant](#disabled-variant) - [Visited variant](#visited-variant) - [Increase utility specificity using a scope instead of `!important`](#increase-utility-specificity-using-a-scope-instead-of-important) - [Add hover/focus variants for opacity by default](#add-hover-focus-variants-for-opacity-by-default) - [Added `border-double` utility](#added-border-double-utility) - [Support negative prefix for boxShadow and letterSpacing plugins](#support-negative-prefix-for-box-shadow-and-letter-spacing-plugins) - [Support passing config path via object](#support-passing-config-path-via-object) - [Fixes](#fixes) - [Placeholders no longer have a default opacity](#placeholders-no-longer-have-a-default-opacity) - [Make horizontal rules visible by default](#make-horizontal-rules-visible-by-default) - [Generate correct negative margins when using calc](#generate-correct-negative-margins-when-using-calc) <a name="new-features"></a> ## New features <a name="added-utilities-for-screenreader-visibility"></a> ### Added utilities for screenreader visibility ([\#964](https://github.com/tailwindcss/tailwindcss/pull/964)) Tailwind now includes a new `accessibility` core plugin that adds `sr-only` and `not-sr-only` utilities for controlling whether an element is visually hidden but still accessible to screen readers. Use `sr-only` to hide an element visually without hiding it from screen readers: ```html <a href="#"> <svg><!-- ... --></svg> <span class="sr-only">Settings</span> </a> ``` Use `not-sr-only` to *undo* `sr-only`, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example: ```html <a href="#"> <svg><!-- ... --></svg> <span class="sr-only sm:not-sr-only">Settings</span> </a> ``` By default, `responsive` and `focus` variants are generated for these utilities. You can use `focus:not-sr-only` to make an element visually hidden by default but visible when the user tabs to it — useful for "skip to content" links: ```html <a href="#" class="sr-only focus:not-sr-only"> Skip to content </a> ``` You can customize which variants are generated by adding an `accessibility` key to the `variants` section of your config file: ```js // tailwind.config.js module.exports = { // ... variants: { accessibility: ['responsive', 'hover', 'focus', 'active'] } } ``` <a name="added-utilities-for-placeholder-color"></a> ### Added utilities for placeholder color ([\#1063](https://github.com/tailwindcss/tailwindcss/pull/1063)) Tailwind now includes `placeholder-{color}` utilities for setting the placeholder color of form elements: ```html <input class="text-gray-900 placeholder-gray-500 ..."> ``` By default, `responsive` and `focus` variants are generated for these utilities. You can customize which variants are generated by adding a `placeholderColor` key to the `variants` section of your config file: ```js // tailwind.config.js module.exports = { // ... variants: { placeholderColor: ['responsive', 'hover', 'focus', 'active'] } } ``` <a name="first-last-even-and-odd-child-variants"></a> ### First, last, even, and odd child variants ([\#1024](https://github.com/tailwindcss/tailwindcss/pull/1024), [\#1027](https://github.com/tailwindcss/tailwindcss/pull/1027)) Tailwind now includes variants for targeting the `first-child`, `last-child`, `nth-child(odd)`, and `nth-child(even)` pseudo-classes. These allow you to apply a utility to an element only when it is the first, last, odd, or even child of its parent. Very useful for things like "put a border between all of these items that are generated in a loop" for example: ```html <ul> <li v-for="item in items" class="border-t first:border-t-0">{{ item }}</li> </ul> ``` ...or to add zebra striping to a table: ```html <table> <tr v-for="row in rows"> <td class="odd:bg-white even:bg-gray-200">...</td> <td class="odd:bg-white even:bg-gray-200">...</td> </tr> </table> ``` The pseudo-classes map to variants as follows: | Pseudo-class | Variant | | --- | --- | | `:first-child` | `first:{utility}` | | `:last-child` | `last:{utility}` | | `:nth-child(odd)` | `odd:{utility}` | | `:nth-child(even)` | `even:{utility}` | Something worth emphasizing is that these variants apply to the child element itself, not to the children of the element with the utility. This is consistent with how other pseudo-class variants in Tailwind work, and how the `:first/last-child` pseudo selectors work in CSS. Said again in code: ```html <!-- This is *not* how these variants are meant to be used --> <ul class="first:border-t-0"> <li v-for="item in items" class="border-t">{{ item }}</li> </ul> <!-- The utilities should be used on the child itself, not the parent --> <ul> <li v-for="item in items" class="border-t first:border-t-0">{{ item }}</li> </ul> ``` These variants are disabled by default for all utilities, but can be enabled for each core plugin in the `variants` section of your config file: ```diff // tailwind.config.js module.exports = { // ... variants: { - backgroundColor: ['responsive', 'hover', 'focus'] + backgroundColor: ['responsive', 'first', 'last', 'even', 'odd', 'hover', 'focus'] } } ``` <a name="disabled-variant"></a> ### Disabled variant ([\#732](https://github.com/tailwindcss/tailwindcss/pull/732)) Tailwind now includes a `disabled` variant for styling elements when they are disabled: ```html <input class="disabled:opacity-50 ..."> ``` This variant is disabled by default for all utilities, but can be enabled for each core plugin in the `variants` section of your config file: ```diff // tailwind.config.js module.exports = { // ... variants: { - opacity: ['responsive', 'hover', 'focus'] + opacity: ['responsive', 'hover', 'focus', 'disabled'] } } ``` <a name="visited-variant"></a> ### Visited variant ([\#976](https://github.com/tailwindcss/tailwindcss/pull/976)) Tailwind now includes a `visited` variant for styling visited links: ```html <a href="#" class="text-blue-500 visited:text-purple-500 ..."> ``` This variant is disabled by default for all utilities, but can be enabled for each core plugin in the `variants` section of your config file: ```diff // tailwind.config.js module.exports = { // ... variants: { - textColor: ['responsive', 'hover', 'focus'] + textColor: ['responsive', 'hover', 'focus', 'visited'] } } ``` <a name="increase-utility-specificity-using-a-scope-instead-of-important"></a> ### Increase utility specificity using a scope instead of `!important` ([\#1020](https://github.com/tailwindcss/tailwindcss/pull/1020)) Prior to Tailwind v1.1, you may have used the `important` option to make sure that no matter what, your utilities always took precedence over any other styles applied to an element: ```js // tailwind.config.js module.exports = { important: true, // ... } ``` This is a totally reasonable thing to do but it can introduce some issues when incorporating third-party JS libraries that add inline styles to your elements, because Tailwind's `important` utilities would defeat the inline styles. This is really common with animation libraries for example. Tailwind v1.1 adds the ability to make utilities "important" in a less aggressive manner by providing a _selector_ instead of a boolean to the `important` option: ```js // tailwind.config.js module.exports = { important: '#app', // ... } ``` What this will do is prefix all of your utilities with that selector, increasing their specificity without actually making them `!important`. By using an ID for this selector and adding that ID to the root element of your site, all of Tailwind's utilities will have a high enough specificity to defeat all other classes used in your project without interfering with inline styles: ```html <html> <!-- ... --> <style> .high-specificity .nested .selector { color: blue; } </style> <body id="app"> <!-- Will be #bada55 --> <div class="high-specificity"> <div class="nested"> <!-- Will be red-500 --> <div class="selector text-red-500"><!-- ... --></div> </div> </div> <!-- Will be #bada55 --> <div class="text-red-500" style="color: #bada55;"><!-- ... --></div> </body> </html> ``` If this seems weird or complicated to you, chances are you haven't run into this situation before and can just ignore this feature. If you've been bitten by this problem in the past though, you'll understand exactly why this feature was added. <a name="add-hover-focus-variants-for-opacity-by-default"></a> ### Add hover/focus variants for opacity by default ([\#1065](https://github.com/tailwindcss/tailwindcss/pull/1065)) Opacity utilities now have `hover` and `focus` variants enabled by default: ```html <div class="opacity-50 hover:opacity-100"><!-- ... --></div> ``` You can disable these if needed by overriding the default opacity variants in the `variants` section of your config file: ```diff // tailwind.config.js module.exports = { // ... variants: { + opacity: ['responsive'] } } ``` <a name="added-border-double-utility"></a> ### Added `border-double` utility ([\#1040](https://github.com/tailwindcss/tailwindcss/pull/1040)) Tailwind now includes a `border-double` utility for, well, giving elements a double border. ```html <div class="border border-double"><!-- ... --></div> ``` <a name="support-negative-prefix-for-box-shadow-and-letter-spacing-plugins"></a> ### Support negative prefix for boxShadow and letterSpacing plugins ([\#992](https://github.com/tailwindcss/tailwindcss/pull/992)) The `boxShadow` and `letterSpacing` plugins now support the negative modifier prefix like `zIndex`, `margin`, and `inset` utilities do: ```js // tailwind.config.js module.exports = { theme: { letterSpacing: { '-1': '-.05em', }, boxShadow: { '-sm': 'inset 0 2px 4px rgba(0,0,0.1)', }, } } ``` This would generate classes like `-tracking-1` and `-shadow-sm`, rather than `tracking--1` and `shadow--sm` like you might expect. <a name="support-passing-config-path-via-object"></a> ### Support passing config path via object ([\#1062](https://github.com/tailwindcss/tailwindcss/pull/1062)) When adding Tailwind to your PostCSS config, you can now specify the config file path using an object syntax instead of only a string: ```js // postcss.config.js module.exports = { plugins: [ // Existing syntax: require('tailwindcss')('custom-config.js'), // Added syntax: require('tailwindcss')({ config: 'custom-config.js' }), ] } ``` This makes Tailwind compatible with PostCSS's object configuration syntax, which wasn't previously possible: ```js // postcss.config.js module.exports = { plugins: { tailwindcss: { config: 'custom-config.js' }, } } ``` See [the pull request](https://github.com/tailwindcss/tailwindcss/pull/1062) for all of the details on how this works. <a name="fixes"></a> ## Fixes <a name="placeholders-no-longer-have-a-default-opacity"></a> ### Placeholders no longer have a default opacity ([\#1064](https://github.com/tailwindcss/tailwindcss/pull/1064)) Prior to v1.1, Tailwind included the following base styles for form elements: ```css input::placeholder, textarea::placeholder { color: inherit; opacity: 0.5; } ``` Due to a bug in IE11, this mistakenly caused the `input` and `textarea` elements themselves to be rendered at 50% opacity, not just the placeholders. We've fixed this in v1.1 by changing the base styles to this: ```css input::placeholder, textarea::placeholder { color: #a0aec0; } ``` This sets the default placeholder to Tailwind's `gray-500` color instead of inheriting the current color and changing the opacity. This means that if you weren't assigning a custom placeholder color to your form elements, **they will now look a bit different than they did before**. This will be most apparent in situations where you have changed the text color of an input and were relying on the `inherit` behavior — for example an input with red text where you also want the placeholder to be red. Now that Tailwind includes placeholder color utilities, you can correct these superficial visual differences by adding a placeholder utility: ```html <input class="text-red-500 placeholder-red-300"> ``` <a name="make-horizontal-rules-visible-by-default"></a> ### Make horizontal rules visible by default ([\#991](https://github.com/tailwindcss/tailwindcss/pull/991)) Prior to v1.1, horizontal rules were mistakenly invisible in Tailwind because they had no border-width assigned. Now `hr` elements have a default border-width of `1px` so they actually show up when you create one. This is technically a very minor breaking change in the event that you were actually depending on `hr` elements not having a default border. You can remove the border by adding `border-0`: ```html <hr class="border-0"> ``` <a name="generate-correct-negative-margins-when-using-calc"></a> ### Generate correct negative margins when using calc ([\#1058](https://github.com/tailwindcss/tailwindcss/pull/1058)) Negative margin values were calculated fairly naively in previous versions of Tailwind by simply prefixing the positive value with a `-`. This of course didn't work if you were using more complex values like `calc(100vw - 10rem)` or `var(--spacing-sm)`. Tailwind v1.1 fixes this issue by using `calc` and the [`reduce-css-calc`](https://www.npmjs.com/package/reduce-css-calc) package to calculate the correct value to use. Read more about it in [the pull request](https://github.com/tailwindcss/tailwindcss/pull/1058).