Tailwind CSS v0.3.0 — Release Notes & Engineering Impact

- <a href="#new-features">New Features</a> - <a href="#enable-disable-modules-and-control-which-variants-are-generated-for-each">Enable/disable modules and control which variants are generated for each</a> - <a href="#focus-variants">Focus variants</a> - <a href="#group-hover-variants">Group hover variants</a> - <a href="#new-variants-at-rule">New `@variants` at-rule</a> - <a href="#customize-the-separator-character">Customize the separator character</a> - <a href="#missing-config-keys-now-fallback-to-their-default-values">Missing config keys now fallback to their default values</a> - <a href="#new-utilities">New utilities</a> - <a href="#upgrade-guide-breaking-changes">Upgrade Guide / Breaking Changes</a> - <a href="#lists-now-have-no-margins-by-default">Lists now have no margins by default</a> - <a href="#pin-no-longer-sets-width-and-height-to-100">`.pin` no longer sets width and height to 100%</a> - <a href="#svg-fill-no-longer-defaults-to-current-color">SVG `fill` no longer defaults to `currentColor`</a> <a name="new-features"></a> ## New Features <a name="enable-disable-modules-and-control-which-variants-are-generated-for-each"></a> ### Enable/disable modules and control which variants are generated for each The Tailwind config file now contains a new `modules` key where you can control which modules should be responsive, or have hover or focus variants generated: ```js // ... module.exports = { // ... modules: { // Generate base appearance utilities + responsive versions appearance: ['responsive'], // Generate base, responsive, hover, and focus versions backgroundAttachment: ['responsive', 'hover', 'focus'], // Only generate base utilities backgroundPosition: [], // ... }, // ... } ``` If you don't need a certain module at all, you can disable it by setting it to `false`: ```js // ... module.exports = { // ... modules: { // ... flexbox: false, // ... }, // ... } ``` This gives you better control over the generated file size and also lets you add hover/focus variants to utilities that don't have them by default, like shadows for example. If you're a PurgeCSS user who doesn't care about the pre-PurgeCSS file size, you can even set `modules` to `all` to generate every variant for every utility :feelsgood: ```js // ... module.exports = { // ... modules: 'all', // ... } ``` Learn more about in the [configuration modules documentation](https://tailwindcss.com/docs/configuration#modules). <a name="focus-variants"></a> ### Focus variants As alluded to earlier, Tailwind now lets you generate `focus:` variants of each utility that are only active on focus. Focus variants are currently not enabled on any modules by default, but you can enable them for a specific module in your own project by adding `'focus'` to the variants list in the `modules` section of your config file: ```js // ... module.exports = { // ... modules: { // ... backgroundColors: ['responsive', 'hover', 'focus'], // ... }, // ... } ``` Focus variants work just like the hover variants that you're used to: ```html <input class="bg-grey-light focus:bg-white border border-grey"> ``` <a name="group-hover-variants"></a> ### Group hover variants Sometimes you need to change the style of an element when some parent element is hovered rather than the element itself. To handle these situations, Tailwind 0.3 adds a new `group-hover` variant. Group hover variants are currently not enabled on any modules by default, but you can enable them for a specific module in your own project by adding `'group-hover'` to the variants list in the `modules` section of your config file: ``` // ... module.exports = { // ... modules: { // ... textColors: ['responsive', 'hover', 'group-hover'], // ... }, // ... } ``` To use a `group-hover:` utility variant, you need to mark the target parent element with the `.group` class: ```html <div class="group ..."> <svg class="text-grey-light group-hover:text-grey-dark"><!-- ... --></svg> <a class="text-blue group-hover:underline" href="#">Click me</a> </div> ``` Check out [this CodePen](https://codepen.io/adamwathan/pen/aVQbLM) to see it in action. <a name="new-variants-at-rule"></a> ### New `@variants` at-rule To make it easy to generate `hover`, `focus`, and `group-hover` versions of your own utilities, Tailwind 0.3 adds a new `@variants` at-rule that lets you specify which variants to generate for a given list of classes: ```css @variants hover, focus { .banana { color: yellow; } .chocolate { color: brown; } } ``` This will generate the following CSS: ```css .banana { color: yellow; } .chocolate { color: brown; } .focus\:banana:focus { color: yellow; } .focus\:chocolate:focus { color: brown; } .hover\:banana:hover { color: yellow; } .hover\:chocolate:hover { color: brown; } ``` The `@variants` at-rule supports all of the values that are supported in the `modules` section of your config file: - `responsive` - `hover` - `focus` - `group-hover` **Note:** In previous versions, Tailwind included undocumented `@hoverable` and `@focusable` directives. These were fundamentally flawed in how they worked, and have been removed in favor of the new `@variants` directive. The `@responsive` directive however **has not** been removed, and we fully intend to continue to support it as a shortcut for `@variants responsive {}`. <a name="customize-the-separator-character"></a> ### Customize the separator character By default, Tailwind uses a colon (`:`) as a separator between variants and utility names: ``` <div class="hover:bg-blue">...</div> ``` Some templating languages (like Pug) don't play nicely with this, so Tailwind 0.3 adds a new configuration option that lets you change this if needed: ```js // ... module.exports = { // ... options: { // ... separator: '_', }, } ``` <a name="missing-config-keys-now-fallback-to-their-default-values"></a> ### Missing config keys now fallback to their default values Prior to Tailwind 0.3, excluding a key (like `backgroundColors`) from your config file was undefined behavior. To make upgrades smooth as new options are added to the config file, missing keys now fallback to their default values. This has the added benefit of allowing you to completely omit keys from your config file if you don't intend to change the default values. The exact behavior is as follows: - Top level keys fallback to their default values only if missing. The contents of top level keys are not merged, except for the two cases noted below. - The `modules` key is merged with the default modules key. This means that if you exclude a module from your config, it will be generated using the default settings. It will not be disabled unless you include the key and set it to `false`. - The `options` key is merged with the default options key. This means if you only want to change one option, you only need to provide that one key. <a name="new-utilities"></a> ### New utilities - `.pin-none` has been added to undo existing `.pin-{side}` utilities at different breakpoints - `.resize-both` has been added to allow resizing an element both horizontally and vertically - A completely new [background attachment module](https://tailwindcss.com/docs/background-attachment) has been added - A completely new [background repeat module](https://tailwindcss.com/docs/background-repeat) has been added - Completely new [SVG fill and SVG stroke modules](http://tailwindcss.com/docs/svg) have been added <a name="upgrade-guide-breaking-changes"></a> ## Upgrade Guide / Breaking Changes <a name="lists-now-have-no-margins-by-default"></a> ### Lists now have no margins by default *Impact: Medium* Until 0.3, Tailwind's Preflight base styles left `ul` and `ol` elements generally untouched, relying on the `list-reset` utility to remove default browser styling if you wanted to use a list for navigation or similar. In 0.3, Tailwind still doesn't change `list-style-type` or `padding` on lists in our base styles, but we do remove margins: ``` ul, ol { margin: 0; } ``` Tailwind already did this for all headings, block quotes, paragraph tags, etc., so removing margins on lists feels much more consistent. It's unlikely this will impact your project as you were most likely overriding the browser's default margins with existing margin utilities. If you were relying on the browser's default list margins, simply add margin utilities to your lists to make up for the now missing default margin. <a name="pin-no-longer-sets-width-and-height-to-100"></a> ### `.pin` no longer sets width and height to 100% *Impact: Low* In an effort to make `.pin{-side?}` utilities easier to undo at different breakpoints, the all-sides `.pin` utility no longer sets `width` and `height` to 100%. This will only affect you if you were using `.pin` on `iframe`, `textarea`, `input`, or `button` elements, and is easily remedied by adding the `w-full` and `h-full` utilities to those elements. <a name="svg-fill-no-longer-defaults-to-current-color"></a> ### SVG `fill` no longer defaults to `currentColor` Prior to 0.3, Tailwind's Preflight styles set all SVG fills to `currentColor`: ``` svg { fill: currentColor; } ``` This made it harder to use icon sets like [Feather](https://feathericons.com/) that are drawn entirely with strokes with Tailwind, because they'd now be filled with the current text color by default instead of having no fill. Tailwind 0.3 removes this base style entirely, and adds the `fill-current` class to make up for it, allowing you to be explicit when you want an SVG element to be filled with the current text color. There's two ways you can update your project for this change: 1. Simply re-add the base styles above to your own CSS. 2. Add the `fill-current` class to any SVG elements that should be filled with the current text color.