Skip to content

v0.5.0
Compare
Choose a tag to compare
@adamwathan adamwathan released this 13 Mar 20:23
· 4419 commits to next since this release
v0.5.0
c32519d

New Features

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.

// ...

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:

Update: Documentation is now available: https://tailwindcss.com/docs/plugins

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

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.

Added .bg-auto background size utility

To allow resetting an element's background size at other breakpoints, Tailwind now includes a .bg-auto utility:

<div class="bg-cover md:bg-auto">...</div>

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:

module.exports = {
  // ...
  
  backgroundSize: {
    'auto': 'auto',
    'cover': 'cover',
    'contain': 'contain',
  },
}

Support for active variants

In addition to hover, focus, and group-hover, Tailwind now includes support for active variants of each utility:

module.exports = {
  // ...
  
  modules: {
    // ...
    backgroundColors: ['hover', 'active'],
    // ...
  }
}

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:

@import "tailwindcss/preflight";

@import "tailwindcss/utilities";

Configuration options for the .container component

Now that the .container component is provided as a built-in plugin, it exposes optional configuration for centering the container by default as well as adding default horizontal padding:

// ...

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:

// ...

module.exports = {
  // ...

  plugins: [
    require('tailwindcss/plugins/container')(),
  ],
}

You can also disable the container component entirely now by removing the plugin from the plugins list:

  // ...
  
  module.exports = {
    // ...
  
    plugins: [
-     require('tailwindcss/plugins/container')(),
    ],
  }

Changes

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:

  // ...
  
  module.exports = {
    // ...
  
+   plugins: [
+     require('tailwindcss/plugins/container')(),
+   ],
  }

You'll also need to add the new @tailwind components directive to your CSS:

  @tailwind preflight;
  
+ @tailwind components;
  
  @tailwind utilities;

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.

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:

  // ...
  
  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

  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.

.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.

.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 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.

Assets 2
Loading