tailwindcss 0.6.2

on Node.js Yarn

• New Features
  • Added table layout utilities for styling tables
  • Configuration can now be passed as an object
• Changes
  • Default config file changes
• Experiments
  • Registering new variants from plugins
  • Allow @apply-ing classes that aren't defined but would be generated

New Features

Added table layout utilities for styling tables (#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.

Configuration can now be passed as an object (#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.

Changes

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:

  module.exports = {
    // ...
    modules: {
      // ...
      svgStroke: [],
+     tableLayout: ['responsive'],
      textAlign: ['responsive'],
      // ...
    }
  }

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.

Registering new variants from plugins (#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:

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.

To enable this experiment, add pluginVariants: true under an experiments key in your Tailwind config:

module.exports = {
  // ...
  experiments: {
    pluginVariants: true
  }
}

Allow @apply-ing classes that aren't defined but would be generated (#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:

module.exports = {
  // ...
  experiments: {
    shadowLookup: true
  }
}