Tailwind CSS v0.7.0 — Release Notes & Engineering Impact

- <a href="#new-features">New Features</a> + <a href="#registering-new-variants-from-plugins">Registering new variants from plugins</a> + <a href="#variant-order-can-be-customized-per-module">Variant order can be customized per module</a> + <a href="#added-focus-within-variant">Added `focus-within` variant</a> + <a href="#fancy-cli-updates">Fancy CLI updates</a> + <a href="#option-to-generate-config-without-comments">Option to generate config without comments</a> + <a href="#make-configured-prefix-optional-when-using-apply">Make configured prefix optional when using `@apply`</a> + <a href="#improve-flexbox-behavior-in-ie">Improve Flexbox behavior in IE 10/11</a> - <a href="#changes">Changes</a> + <a href="#variant-order-in-modules-config-is-now-significant">Variant order in modules is now significant</a> + <a href="#normalize-updated-to-8">Normalize.css updated to v8.0.0</a> + <a href="#removed-css-fix-for-chrome-62-button-border-radius-change">Removed CSS fix for Chrome 62 button border radius change</a> <a name="new-features"></a> ## New Features <a name="registering-new-variants-from-plugins"></a> ### Registering new variants from plugins ([\#505](https://github.com/tailwindcss/tailwindcss/pull/505)) *(Introduced as an experiment in [v0.6.2](https://github.com/tailwindcss/tailwindcss/releases/v0.6.2), now promoted to an official feature)* Plugins can now add their own variants (like `hover`, `focus`, `group-hover`, etc.) to Tailwind. To get started, destructure the new `addVariant` function from the object passed to your plugin, and call it with the name of the variant you'd like to add and a callback that can be used to manipulate the PostCSS nodes where the variant is being applied: ```js module.exports = { plugins: [ function({ addVariant }) { addVariant('important', ({ container }) => { container.walkRules(rule => { rule.selector = `.\\!${rule.selector.slice(1)}` rule.walkDecls(decl => { decl.important = true }) }) }) } ] } ``` Documentation is coming soon, but for now learn more in [the pull request](https://github.com/tailwindcss/tailwindcss/pull/505#issuecomment-400408451). <a name="variant-order-can-be-customized-per-module"></a> ### Variant order can be customized per module ([\#505](https://github.com/tailwindcss/tailwindcss/pull/505)) *(Introduced as an experiment in [v0.6.2](https://github.com/tailwindcss/tailwindcss/releases/v0.6.2), now promoted to an official feature)* Variants are now generated in the order that they are specified in the `modules` section of your config file, rather than in a hard-coded static order like in previous versions of Tailwind. That means that if you want `focus` variants to defeat `hover` variants for background colors, but you want the opposite behavior for border colors, you can actually do that now by specifying the order in your config: ```js modules.exports = { // ... modules: { // ... backgroundColors: ['responsive', 'hover', 'focus'], // ... borderColors: ['responsive', 'focus', 'hover'], // ... } } ``` Note that this doesn't affect `responsive` variants — those are a special case since responsive versions are also generated for other variants, and we group responsive declarations to optimize the resulting CSS. <a name="added-focus-within-variant"></a> ### Added `focus-within` variant ([\#463](https://github.com/tailwindcss/tailwindcss/pull/463)) Tailwind now includes a `focus-within` variant that you can use to change how an element is styled if an element *inside* of it has focus. ```html <div class="focus-within:shadow-lg"> <label> <span>Email</span> <input type="email"> </label> </div> ``` [Learn about the `:focus-within` pseudo-class on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) By default we don't generate `focus-within` variants for any utilities, but you can change this in the modules section your Tailwind configuration file: ```diff modules.exports = { // ... modules: { // ... - backgroundColors: ['responsive', 'hover', 'focus'], + backgroundColors: ['responsive', 'focus-within', 'hover', focus'], // ... } } ``` <a name="fancy-cli-updates"></a> ### Fancy CLI updates ([\#554](https://github.com/tailwindcss/tailwindcss/pull/554)) Tailwind 0.7.0 includes a completely rewritten CLI tool with nicer output and a better user experience.  All of the existing functionality is still there with the same API, it just looks better. <a name="option-to-generate-config-without-comments"></a> ### Option to generate config without comments ([\#558](https://github.com/tailwindcss/tailwindcss/pull/558)) You can now use the `--no-comments` option when running `tailwind init` to generate a config file that excludes all of the inline documentation comments. This is a great way to make your config file easier to skim if you're an experienced Tailwind user who doesn't need the comments. <a name="make-configured-prefix-optional-when-using-apply"></a> ### Make configured prefix optional when using `@apply` ([\#553](https://github.com/tailwindcss/tailwindcss/pull/553)) If you're [prefixing](https://tailwindcss.com/docs/configuration/#prefix) your generated utilities, including that prefix when using `@apply` is now optional. ```css /* Before */ .my-component { @apply tw-bg-blue tw-text-white tw-font-bold; } /* Now */ .my-component { @apply bg-blue text-white font-bold; } ``` You can continue to use the prefix if you like, or drop it if you prefer a terser syntax. <a name="improve-flexbox-behavior-in-ie"></a> ### Improve Flexbox behavior in IE 10/11 ([\#550](https://github.com/tailwindcss/tailwindcss/pull/550)) IE 10 and 11 interpret the shorthand `flex` property differently than other browsers. Tailwind now specifies explicit grow, shrink, and basis values for the `flex-1`, `flex-auto`, and `flex-initial` utilities for a more consistent cross-browser experience. [Learn more at the flexbugs repo](https://github.com/philipwalton/flexbugs) (bugs [\#4](https://github.com/philipwalton/flexbugs#flexbug-4) and [\#6](https://github.com/philipwalton/flexbugs#flexbug-6) specifically) <a name="changes"></a> ## Changes <a name="variant-order-in-modules-config-is-now-significant"></a> ### Variant order in modules config is now significant ([\#505](https://github.com/tailwindcss/tailwindcss/pull/505)) *Impact: Low, Effort: Low* Prior to 0.7.0, variants were always generated in the same order, regardless of the order specified in the `modules` section of your config file. Now, variants are generated in the they are specified. That means that if your config file currently lists variants in a different order than the <=0.6.6 default variant order, those variants will appear in a different order in your CSS. To preserve the <=0.6.6 behavior, simply edit the `modules` section of your config file to make sure your variants are listed in the following order: ```js modules.exports = { // ... modules: { // ... [anyModule]: ['group-hover', 'hover', 'focus-within', 'focus', 'active'] // ... } } ``` <a name="normalize-updated-to-8"></a> ### Normalize.css updated to v8.0.0 ([\#537](https://github.com/tailwindcss/tailwindcss/pull/537)) *Impact: Low, Effort: Low* We've updated our dependency on [Normalize.css](https://github.com/necolas/normalize.css) from 7.0.0 to 8.0.0. This drops support for very old browsers like IE9, Android 4.3, Safari 8, and iOS Safari 7-8. If you still need to support those browsers, remove `@tailwind preflight` from your CSS, add Normalize.css 7.0.0 to your project, and manually add our [additional preflight base styles](https://github.com/tailwindcss/tailwindcss/blob/46ea06e6d6cb3196be17a2b81c5c9a5e7e4a304d/css/preflight.css#L449-L585). <a name="removed-css-fix-for-chrome-62-button-border-radius-change"></a> ### Removed CSS fix for Chrome 62 button border radius change ([\#579](https://github.com/tailwindcss/tailwindcss/pull/579)) *Impact: Low, Effort: Low* When Chrome 62 was released, it introduced a user agent stylesheet change that added a default border radius to all buttons. This messed up styles for like half of the internet (including sites like GitHub itself), so Chrome reverted the change in Chrome 63. We included a fix for this in Tailwind with the intention to remove it when Chrome 62 was no longer in common use. Now that usage has dropped to 0.09%, we've removed our fix. If this is a problem for you *(it isn't)*, you can add [the removed styles](https://github.com/tailwindcss/tailwindcss/pull/579/files#diff-328b7fa9880734a59bf8dab8bfe8c12a) back to your project right after `@tailwind preflight`.