Tailwind CSS v1.2.0 — Release Notes & Engineering Impact

# Tailwind CSS v1.2.0 This is probably the most exciting feature release in the history of Tailwind, so put on your seat belts. ## New Features - [CSS Transition support](#user-content-css-transition-support) - [CSS Transform support](#user-content-css-transform-support) - [CSS Grid support](#user-content-css-grid-support) - [Added max-w-{screen} utilities](#user-content-added-max-w-screen-utilities) - [Added max-w-none utility](#user-content-added-max-w-none-utility) - [Added `rounded-md` utility](#user-content-added-rounded-md-utility) - [Added `shadow-sm` utility](#user-content-added-shadow-sm-utility) - [Added `shadow-xs` utility](#user-content-added-shadow-xs-utility) - [Added stroke-width utilities](#user-content-added-stroke-width-utilities) - [Added fixed line-height utilities](#user-content-added-fixed-line-height-utilities) - [Added additional display utilities for table elements](#user-content-added-additional-display-utilities-for-table-elements) - [Added box-sizing utilities](#user-content-added-box-sizing-utilities) - [Added clear utilities](#user-content-added-clear-utilities) - [Config file dependencies are now watchable](#user-content-config-file-dependencies-are-now-watchable) - [Allow plugins to extend the user's config](#user-content-allow-plugins-to-extend-the-user-s-config) - [Added new `plugin` and `plugin.withOptions` APIs](#user-content-added-new-plugin-and-plugin-with-options-ap-is) <a name="css-transition-support"></a> ### CSS Transition support (\#1273) Tailwind now includes utilities for setting the `transition-property`, `transition-duration`, and `transition-timing-function` properties. ```html <button class="opacity-50 hover:opacity-100 transition-opacity duration-100 ease-out">...</button> ``` <details> <summary><strong>Expand to see the default values for these utilities</strong></summary> ```js // tailwind.config.js module.exports = { theme: { // .transition-{property} transitionProperty: { none: 'none', all: 'all', default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', colors: 'background-color, border-color, color, fill, stroke', opacity: 'opacity', shadow: 'box-shadow', transform: 'transform', }, // .ease-{timingFunction} transitionTimingFunction: { linear: 'linear', in: 'cubic-bezier(0.4, 0, 1, 1)', out: 'cubic-bezier(0, 0, 0.2, 1)', 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', }, // .duration-{duration} transitionDuration: { '75': '75ms', '100': '100ms', '150': '150ms', '200': '200ms', '300': '300ms', '500': '500ms', '700': '700ms', '1000': '1000ms', }, } } ``` </details> For more information, [check out the documentation](https://tailwindcss.com/docs/transition-property). <a name="css-transform-support"></a> ### CSS Transform support (\#1272) Tailwind now includes utilities for scaling, rotating, translating, and skewing elements. ```html <span class="transform scale-150 rotate-45 translate-x-full origin-center"></span> ``` <details> <summary><strong>Expand to see the default values for these utilities</strong></summary> ```js // tailwind.config.js module.exports = { theme: { // .origin-{origin} transformOrigin: { center: 'center', top: 'top', 'top-right': 'top right', right: 'right', 'bottom-right': 'bottom right', bottom: 'bottom', 'bottom-left': 'bottom left', left: 'left', 'top-left': 'top left', }, // .scale-{scale} // .scale-x-{scale} // .scale-y-{scale} scale: { '0': '0', '50': '.5', '75': '.75', '90': '.9', '95': '.95', '100': '1', '105': '1.05', '110': '1.1', '125': '1.25', '150': '1.5', }, // .rotate-{angle} rotate: { '-180': '-180deg', '-90': '-90deg', '-45': '-45deg', '0': '0', '45': '45deg', '90': '90deg', '180': '180deg', }, // .translate-x-{distance} // .translate-y-{distance} // .-translate-x-{distance} // .-translate-y-{distance} translate: (theme, { negative }) => ({ ...theme('spacing'), ...negative(theme('spacing')), '-full': '-100%', '-1/2': '-50%', '1/2': '50%', full: '100%', }), // .skew-x-{amount} // .skew-y-{amount} skew: { '-12': '-12deg', '-6': '-6deg', '-3': '-3deg', '0': '0', '3': '3deg', '6': '6deg', '12': '12deg', }, } } ``` </details> One notable difference in how this works vs. other utilities in Tailwind is that the `transform` utility acts sort of like a "toggle" — you need to add that class to "enable" transforms on an element but on its own it doesn't actually apply any transforms. You apply the actual transforms by stacking additional utilities for the types of transforms you'd like to apply, like `scale-150` to scale an element to 150% of its size, or `rotate-45` to rotate it 45 degrees. To make it possible to compose multiple transforms like this, we've implemented this feature using CSS custom properties, which means **transforms in Tailwind are not supported in IE11**. If you need to support IE11 and would like to use transforms in your project, you'll need to write custom CSS as you would have in earlier versions of Tailwind. For more information, [check out the documentation](https://tailwindcss.com/docs/scale). <a name="css-grid-utilities"></a> ### CSS Grid utilities (\#1274) Tailwind now includes utilities for [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout). ```html <div class="grid grid-cols-2 lg:grid-cols-8 gap-6"> <div class="col-span-1 lg:col-span-3"></div> <div class="col-span-1 lg:col-span-3"></div> <div class="col-start-1 col-end-3 lg:col-start-4 lg:col-end-8"></div> <div class="col-span-1 col-start-1 lg:col-span-4 lg:col-start-2"></div> <div class="col-span-1 col-end-3 lg:col-span-6 lg:col-end-9"></div> </div> ``` <details> <summary><strong>Expand to see the default values for these utilities</strong></summary> ```js // tailwind.config.js module.exports = { theme: { // .gap-{spacing}, .row-gap-{spacing}, .col-gap-{spacing} gap: theme => theme('spacing'), // .grid-cols-{cols} gridTemplateColumns: { none: 'none', '1': 'repeat(1, minmax(0, 1fr))', '2': 'repeat(2, minmax(0, 1fr))', '3': 'repeat(3, minmax(0, 1fr))', '4': 'repeat(4, minmax(0, 1fr))', '5': 'repeat(5, minmax(0, 1fr))', '6': 'repeat(6, minmax(0, 1fr))', '7': 'repeat(7, minmax(0, 1fr))', '8': 'repeat(8, minmax(0, 1fr))', '9': 'repeat(9, minmax(0, 1fr))', '10': 'repeat(10, minmax(0, 1fr))', '11': 'repeat(11, minmax(0, 1fr))', '12': 'repeat(12, minmax(0, 1fr))', }, // .col-{value} gridColumn: { auto: 'auto', 'span-1': 'span 1 / span 1', 'span-2': 'span 2 / span 2', 'span-3': 'span 3 / span 3', 'span-4': 'span 4 / span 4', 'span-5': 'span 5 / span 5', 'span-6': 'span 6 / span 6', 'span-7': 'span 7 / span 7', 'span-8': 'span 8 / span 8', 'span-9': 'span 9 / span 9', 'span-10': 'span 10 / span 10', 'span-11': 'span 11 / span 11', 'span-12': 'span 12 / span 12', }, // .col-start-{value} gridColumnStart: { auto: 'auto', '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '10': '10', '11': '11', '12': '12', '13': '13', }, // .col-end-{value} gridColumnEnd: { auto: 'auto', '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', '8': '8', '9': '9', '10': '10', '11': '11', '12': '12', '13': '13', }, // .grid-rows-{rows} gridTemplateRows: { none: 'none', '1': 'repeat(1, minmax(0, 1fr))', '2': 'repeat(2, minmax(0, 1fr))', '3': 'repeat(3, minmax(0, 1fr))', '4': 'repeat(4, minmax(0, 1fr))', '5': 'repeat(5, minmax(0, 1fr))', '6': 'repeat(6, minmax(0, 1fr))', }, // .row-{value} gridRow: { auto: 'auto', 'span-1': 'span 1 / span 1', 'span-2': 'span 2 / span 2', 'span-3': 'span 3 / span 3', 'span-4': 'span 4 / span 4', 'span-5': 'span 5 / span 5', 'span-6': 'span 6 / span 6', }, // .row-start-{value} gridRowStart: { auto: 'auto', '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', }, // .row-end-{value} gridRowEnd: { auto: 'auto', '1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6', '7': '7', }, } } ``` </details> By default we ship the necessary utilities to construct grids with 1–12 explicit columns and 1-6 explicit rows and place elements anywhere in that grid. Note that the approach we've taken to supporting CSS Grid **is not compatible with IE11**. For building grid layouts in older browsers, we recommend using Flexbox instead of CSS Grid. For more information, [check out the documentation](https://tailwindcss.com/docs/grid-template-columns). <a name="added-max-w-screen-utilities"></a> ### Added max-w-{screen} utilities (\#1284) Tailwind's default `max-width` scale now includes values to match your breakpoints, taking the form `max-w-screen-{breakpointName}`. ```html <div class="max-w-screen-lg">...</div> ``` These are useful when you need behavior similar to the `container` class but only for certain sizes. <a name="added-max-w-none-utility"></a> ### Added max-w-none utility (\#1283) Tailwind's default `max-width` scale now includes a `none` value for removing any max-width constraint an element might have. ```html <div class="max-w-md lg:max-w-none">...</div> ``` <a name="added-rounded-md-utility"></a> ### Added rounded-md utility (\#1281) Tailwind's default `border-radius` scale now includes an `md` value for giving an element a 6px border radius. ```html <div class="rounded-md"></div> ``` <a name="added-shadow-sm-utility"></a> ### Added shadow-sm utility (\#1280) Tailwind's default `box-shadow` scale now includes an `sm` value for giving an element a very subtle small shadow — great for giving buttons or inputs a bit of depth without being super in-your-face. ```html <div class="shadow-sm"></div> ``` For more information, [check out the pull request](https://github.com/tailwindcss/tailwindcss/pull/1280). <a name="added-shadow-sm-utility"></a> ### Added shadow-xs utility (\#1333) Tailwind's default `box-shadow` scale now includes an `xs` value for giving an element a very subtle outline shadow, very useful for stacking with other shadows when you need a tiny bit of extra distinction from the background. ```html <div class="shadow-md rounded-md"> <div class="shadow-xs rounded-md"> <!-- ... --> </div> </div> ``` For more information, [check out the pull request](https://github.com/tailwindcss/tailwindcss/pull/1333). <a name="added-stroke-width-utilities"></a> ### Added stroke-width utilities (\#1094) Tailwind now includes utilities for controlling the `stroke-width` property of SVG elements. ```html <svg class="stroke-2">...</svg> ``` <details> <summary><strong>Expand to see the default values for these utilities</strong></summary> ```js // tailwind.config.js module.exports = { theme: { // .stroke-{width} strokeWidth: { '0': '0', '1': '1', '2': '2', } } } ``` </details> For more information, [check out the documentation](https://tailwindcss.com/docs/stroke-width). <a name="added-fixed-line-height-utilities"></a> ### Added fixed line-height utilities (\#1362) Tailwind now includes a sensible set of fixed-value line-height utilities in addition to the existing relative line-height utilities. ```html <svg class="leading-5">...</svg> ``` <details> <summary><strong>Expand to see the default values for these utilities</strong></summary> ```js // tailwind.config.js module.exports = { theme: { // .leading-{size} lineHeight: { none: '1', tight: '1.25', snug: '1.375', normal: '1.5', relaxed: '1.625', loose: '2', '3': '.75rem', '4': '1rem', '5': '1.25rem', '6': '1.5rem', '7': '1.75rem', '8': '2rem', '9': '2.25rem', '10': '2.5rem', } } } ``` </details> For more information, [check out the documentation](https://tailwindcss.com/docs/line-height). <a name="added-additional-display-utilities-for-table-elements"></a> ### Added additional display utilities for table elements (\#954) Tailwind now includes a complete set of `display` utilities for table elements. ```html <div class="table-header-group">...</div> ``` We've added `table-caption`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, and `table-row-group`. <a name="added-box-sizing-utilities"></a> ### Added box-sizing utilities (\#1031) Tailwind now includes `box-border` and `box-content` utilities for setting the `box-sizing` property of an element. ```html <div class="box-content">...</div> ``` These can be useful when working with third party libraries that rely on the default browser value of `box-sizing: content-box`, which we override in our base styles. For more information, [check out the documentation](https://tailwindcss.com/docs/box-sizing). <a name="added-clear-utilities"></a> ### Added clear utilities (\#1051) Tailwind now includes `clear-left`, `clear-right`, and `clear-both` utilities for clearing floats using the `clear` property. ```html <div class="clear-left">...</div> ``` For more information, [check out the documentation](https://tailwindcss.com/docs/clear). <a name="config-file-dependencies-are-now-watchable"></a> ### Config file dependencies are now watchable (\#1072) If you are `require`-ing other modules inside your `tailwind.config.js` file, those files will now be automatically watched for changes when running a webpack/PostCSS watcher. Previously, you'd have to restart your watcher any time you changed those files. Now those changes will be noticed automatically and your CSS will just rebuild as expected — hurray! For more information, [check out the pull request](https://github.com/tailwindcss/tailwindcss/pull/1072). <a name="added-new-plugin-and-plugin-with-options-ap-is"></a> ### Added new `plugin` and `plugin.withOptions` APIs (\#1268) In prior versions of Tailwind, plugins were just simple anonymous functions: ```js // my-plugin.js module.exports = function ({ addUtilities, variants, theme }) { // ... } ``` While this approach still works great and is 100% supported, Tailwind v1.2 adds two new official APIs for creating plugins that allow us to support some helpful new features. The new `tailwindcss/plugin` module exports a function that you can use to create a plugin like so: ```js // my-plugin.js const plugin = require('tailwindcss/plugin') module.exports = plugin(function ({ addUtilities, variants, theme }) { // ... }) ``` You can also use `plugin.withOptions` to create a plugin that accepts some additional user configuration right in the `plugins` section of your config: ```js // my-plugin.js const plugin = require('tailwindcss/plugin') module.exports = plugin.withOptions(function (options) { return function ({ addUtilities, variants, theme }) { // ... } }) ``` Previously if you designed a plugin this way, users would have to make sure to invoke your plugin in their config, even if they had no custom configuration to provide: ```js // tailwind.config.js module.exports = { plugins: [ require('plugin-with-no-options'), require('plugin-that-has-options')(), ] } ``` Now Tailwind is smart enough to invoke the function on the user's behalf, so if they don't want to provide any options, they can just require the plugin: ```js // tailwind.config.js module.exports = { plugins: [ require('plugin-with-no-options'), require('plugin-that-has-options'), ] } ``` <a name="allow-plugins-to-extend-the-user-s-config"></a> ### Allow plugins to extend the user's config (\#1162) Plugins can now extend the user's config file by providing their own configuration object as a second argument to the new `plugin` API: ```js // my-plugin.js const plugin = require('tailwindcss/plugin') module.exports = plugin(function ({ addUtilities, variants, theme }) { // ... }, { theme: { myPluginName: {...}, }, variants: { myPluginName: ['responsive'], } }) ``` This also works using the `plugin.withOptions` API, just pass a function that accepts your options and returns your config: ```js // my-plugin.js const plugin = require('tailwindcss/plugin') module.exports = plugin.withOptions(function (options) { return function ({ addUtilities, variants, theme }) { // ... } }, function (options) { return { theme: { myPluginName: {...}, }, variants: { myPluginName: ['responsive'], } } }) ``` By providing your default theme values/variants this way, users can use Tailwind's `extend` feature to extend your defaults just like they can with core plugins.