Tailwind CSS v0.6.2 — Release Notes & Engineering Impact

- <a href="#new-features">New Features</a> + <a href="added-table-layout-utilities-for-styling-tables">Added table layout utilities for styling tables</a> + <a href="#configuration-can-now-be-passed-as-an-object">Configuration can now be passed as an object</a> - <a href="#changes">Changes</a> + <a href="#default-config-file-changes">Default config file changes</a> - <a href="#experiments">Experiments</a> + <a href="#registering-new-variants-from-plugins">Registering new variants from plugins</a> + <a href="#allow-applying-classes-that-arent-defined-but-would-be-generated">Allow `@apply`-ing classes that aren't defined but would be generated</a> <a name="new-features"></a> ## New Features <a name="added-table-layout-utilities-for-styling-tables"></a> ### Added table layout utilities for styling tables ([\#504](https://github.com/tailwindcss/tailwindcss/pull/504)) Tailwind now includes `.table-auto` and `.table-fixed` utilities for controlling the `table-layout` property. By default we only generate responsive variants for these utilities but you can change this through the `tableLayout` module your Tailwind configuration file. We've also updated Preflight to set `border-collapse: collapse` by default on all tables. <a name="configuration-can-now-be-passed-as-an-object"></a> ### Configuration can now be passed as an object ([\#508](https://github.com/tailwindcss/tailwindcss/pull/508)) Normally you pass your configuration to Tailwind by giving it a path: ``` // .postcssrc.js or similar module.exports = { // ... plugins: [ // ... require('tailwindcss')('./tailwind.js'), ] } ``` Now you can also pass an object directly: ``` // .postcssrc.js or similar const tailwindConfig = { // ... } module.exports = { // ... plugins: [ // ... require('tailwindcss')(tailwindConfig), ] } ``` Note that **we still recommend passing a path instead of an object**, because Tailwind can't rebuild when the config changes if it doesn't have a config file to watch. <a name="changes"></a> ## Changes <a name="default-config-file-changes"></a> ### Default config file changes *Impact: Low, Effort: Low* The default config file now includes a new `tableLayout` entry in the `modules` section. Simply add this to your config file to sync it with this change, or leave it out if you just want to inherit the default configuration for the new module: ```diff module.exports = { // ... modules: { // ... svgStroke: [], + tableLayout: ['responsive'], textAlign: ['responsive'], // ... } } ``` <a name="experiments"></a> ## Experiments Tailwind 0.6.2 includes two new major features that are disabled by default behind flags. **These features may be changed or removed at any time without any regard for semantic versioning, so please do not depend on them in production just yet.** <a name="registering-new-variants-from-plugins"></a> ### Registering new variants from plugins ([\#505](https://github.com/tailwindcss/tailwindcss/pull/505)) 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 }) }) }) } ] } ``` Proper documentation will be provided when this feature is stable and official, but in the mean time you can learn more by reading [this comment from the pull request](https://github.com/tailwindcss/tailwindcss/pull/505#issuecomment-400408451). To enable this experiment, add `pluginVariants: true` under an `experiments` key in your Tailwind config: ```js module.exports = { // ... experiments: { pluginVariants: true } } ``` <a name="allow-applying-classes-that-arent-defined-but-would-be-generated"></a> ### Allow `@apply`-ing classes that aren't defined but would be generated ([\#516](https://github.com/tailwindcss/tailwindcss/pull/516)) You can now use `@apply` to apply classes that aren't defined but would exist if `@tailwind utilities` was included in the same CSS file. This is mostly useful on projects that are setup to process multiple styles independently, for example a Vue.js project where you are using the `<style>` block of your single file components. To enable this experiment, add `shadowLookup: true` under an `experiments` key in your Tailwind config: ```js module.exports = { // ... experiments: { shadowLookup: true } } ```