Tailwind CSS v0.5.0 — Release Notes & Engineering Impact

- <a href="#changes">New Features</a> + <a href="#plugin-system">Plugin system</a> + <a href="#added-sticky-position-utility">Added `.sticky` position utility</a> + <a href="#added-cursor-wait-and-cursor-move">Added `.cursor-wait` and `.cursor-move` utilities</a> + <a href="#added-bg-auto-background-size-utility">Added `.bg-auto` background size utility</a> + <a href="#background-sizes-are-now-customizable">Background sizes are now customizable</a> + <a href="#support-for-active-variants">Support for `active` variants</a> + <a href="#better-postcss-import-support">Better `postcss-import` support</a> + <a href="#configuration-options-for-the-container-component">Configuration options for the `.container` component</a> - <a href="#changes">Changes</a> + <a href="#the-container-component-is-now-a-built-in-plugin">The `.container` component is now a built-in plugin</a> + <a href="#state-variant-precedence-changes">State variant precedence changes</a> + <a href="#new-config-file-keys">New config file keys</a> + <a href="#overflow-x-y-scroll-now-set-overflow-scroll-instead-of-overflow-auto">`.overflow-x/y-scroll` now set `overflow: scroll` instead of `overflow: auto`</a> + <a href="#roman-renamed-to-not-italic"><strike>`.roman` renamed to `.not-italic`</strike></a> <a name="new-features"></a> ## New Features <a name="plugin-system"></a> ### Plugin system Tailwind now includes a feature-rich plugin system that allows people to create reusable third-party packages that can hook into Tailwind's compilation process to add new styles. ```js // ... module.exports = { // ... plugins: [ function({ addUtilities, addComponents, config, prefix, e }) { addComponents( { ['.btn-blue']: { backgroundColor: 'blue', }, }, { respectPrefix: true } ) }, ], // ... } ``` Documentation is coming very shortly, but in the mean time you can learn more through these two pull requests: - [Add plugin system](https://github.com/tailwindcss/tailwindcss/pull/397) - [Support CSS-in-JS syntax in plugins](https://github.com/tailwindcss/tailwindcss/pull/412) **Update**: Documentation is now available: https://tailwindcss.com/docs/plugins <a name="added-sticky-position-utility"></a> ### Added `.sticky` position utility Tailwind now includes a `.sticky` utility for setting an element to `position: sticky`. This isn't supported by IE 11, but falls back fairly gracefully with no effort so we decided to include it out of the box. [Learn more about sticky positioning at MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning) <a name="added-cursor-wait-and-cursor-move"></a> ### Added `.cursor-wait` and `.cursor-move` utilities In addition to `.cursor-auto`, `.cursor-default`, `.cursor-pointer`, and `.cursor-not-allowed`, Tailwind now includes `.cursor-wait` to indicate when the application is busy, and `.cursor-move` to indicate that an element can be moved. <a name="added-bg-auto-background-size-utility"></a> ### Added `.bg-auto` background size utility To allow resetting an element's background size at other breakpoints, Tailwind now includes a `.bg-auto` utility: ```html <div class="bg-cover md:bg-auto">...</div> ``` <a name="background-sizes-are-now-customizable"></a> ### Background sizes are now customizable If you'd like to customize the available background size utilities in your project, you can now do so by adding a `backgroundSize` key to your Tailwind config: ```js module.exports = { // ... backgroundSize: { 'auto': 'auto', 'cover': 'cover', 'contain': 'contain', }, } ``` <a name="support-for-active-variants"></a> ### Support for `active` variants In addition to `hover`, `focus`, and `group-hover`, Tailwind now includes support for `active` variants of each utility: ```js module.exports = { // ... modules: { // ... backgroundColors: ['hover', 'active'], // ... } } ``` <a name="better-postcss-import-support"></a> ### Better `postcss-import` support If you're using `postcss-import` to inline your imports, you can't use `@tailwind preflight` or `@tailwind utilities` directly in a file that contains other imports, due to `postcss-import` staying strict to the CSS spec for import statements. Previously, the workaround for this was to create a new file just for `@tailwind preflight` and another new file just for `@tailwind utilities`, and then `@import` those files into your main stylesheet. It turns out `postcss-import` can import files from `node_modules`, so as of v0.5.0, you can now import these files directly from Tailwind itself: ```css @import "tailwindcss/preflight"; @import "tailwindcss/utilities"; ``` <a name="configuration-options-for-the-container-component"></a> ### Configuration options for the `.container` component Now that the `.container` component [is provided as a built-in plugin](#the-container-component-is-now-a-built-in-plugin), it exposes optional configuration for centering the container by default as well as adding default horizontal padding: ```js // ... module.exports = { // ... plugins: [ require('tailwindcss/plugins/container')({ center: true, padding: '2rem', }), ], } ``` Containers are still not centered with no padding by default, and the configuration object is not required: ```js // ... module.exports = { // ... plugins: [ require('tailwindcss/plugins/container')(), ], } ``` You can also disable the container component entirely now by removing the plugin from the plugins list: ```diff // ... module.exports = { // ... plugins: [ - require('tailwindcss/plugins/container')(), ], } ``` <a name="changes"></a> ## Changes <a name="the-container-component-is-now-a-built-in-plugin"></a> ### The `.container` component is now a built-in plugin *Impact: Large, Effort: Low* The `.container` component has long been a bit of an oddball in the Tailwind codebase; it's the only set of styles that can't be used with state variants and apply different styles at different breakpoints. With the addition of the new plugin system, it made sense to move the container component out of same bucket of code that holds all of our utility classes and into its own plugin with its own options. If you are using the container in your projects, you will need to add the following section to your existing Tailwind config file: ```diff // ... module.exports = { // ... + plugins: [ + require('tailwindcss/plugins/container')(), + ], } ``` You'll also need to add the new `@tailwind components` directive to your CSS: ```diff @tailwind preflight; + @tailwind components; @tailwind utilities; ``` <a name="state-variant-precedence-changes"></a> ### State variant precedence changes *Impact: Small, Effort: High* Prior to 0.5.0, state variants had the following precedence (lowest to highest): - Focus - Hover - Group Hover That means that if an element had both `focus:bg-blue` and `hover:bg-green` applied, when the element was both focused *and* hovered, the hover styles would take precedence, so the element would be green. It also meant that if an element had `group-hover:bg-blue` and `hover:bg-green` applied, hovering the element would make it blue because the group styles would take precedence over the individual element styles. In 0.5.0, state variants have the following precedence (lowest to highest): - Group Hover - Hover - Focus - Active Now `hover` styles will defeat `group-hover` styles, and `focus` styles will defeat `hover` styles. If this sounds counter-intuitive, see #417 for more information on the motivation behind this change. **It is extremely unlikely that this change affects you**; the odds that you were changing the same property on both hover and focus is extremely low, and if you were, I'm willing to bet it was on an `input` field where the new behavior would actually feel like an improvement. If this change does break the expected behavior in your project, the best solution is to create your own component classes for the places where you were doing complex interaction like this so you can control the precedence manually. <a name="new-config-file-keys"></a> ### New config file keys *Impact: Small, Effort: Low* #### New `plugins` key If you'd like to use the new plugin system in an existing project, you'll need to add the `plugins` key to your config, and include the container component plugin if you need it: ```diff // ... module.exports = { // ... + plugins: [ + require('tailwindcss/plugins/container')(), + ], } ``` **This is optional**, your project will build fine without this change and will just fall back to the `plugins` configuration from the default config file. #### New `backgroundSize` key If you'd like to customize the available background size utilities, add the `backgroundSize` key to your config ```diff module.exports = { // ... + backgroundSize: { + 'auto': 'auto', + 'cover': 'cover', + 'contain': 'contain', + }, } ``` **This is optional**, your project will build fine without this change and will just fall back to the `backgroundSize` configuration from the default config file. <a name="overflow-x-y-scroll-now-set-overflow-scroll-instead-of-overflow-auto"></a> ### `.overflow-x/y-scroll` now set `overflow: scroll` instead of `overflow: auto` *Impact: Large, Effort: Medium* The `.overflow-x-scroll` and `.overflow-y-scroll` utilities now set `overflow` to `scroll` instead of `auto`. New `.overflow-x-auto` and `.overflow-y-auto` utilities have been added to get the `auto` behavior with more consistent naming. This change won't break any sites but will cause scrollbars to appear on Windows in places where they might not be actually needed, so if you don't want them visible you should switch instances of `.overflow-x/y-scroll` to `.overflow-x/y-auto`. We've also removed the `-ms-overflow-style: -ms-autohiding-scrollbar` styles from the overflow utilities, which means scrollbars will now render with their default styling in IE/Edge instead of being forced to render as autohiding, which is not the browsers normal behavior. <a name="roman-renamed-to-not-italic"></a> ### ~~`.roman` renamed to `.not-italic`~~ ~~*Impact: Large, Effort: Medium*~~ ~~The `.roman` utility for undoing italic font styles has been renamed to `.not-italic` since `.roman` is a terrible name.~~ **This was immediately reverted in [v0.5.1](https://github.com/tailwindcss/tailwindcss/releases/tag/v0.5.1) because it breaks compatibility with cssnext; ignore this change.** Hoping to change this in a future breaking release if/once the issue with `postcss-selector-not` is resolved.