Bump tailwindcss from 0.4.1 to 0.5.1

[dependabot-preview]

Bumps tailwindcss from 0.4.1 to 0.5.1.

Release notes

• Reverts a change that renamed the .roman class to .not-italic due to the fact that it breaks compatibility with cssnext: Doesn't take into account escaped colons when parsing for :not csstools/postcss-selector-not#10

  We'll stick with .roman for now with a plan to switch to .not-italic in another breaking version should that issue get resolved in postcss-selector-not.

• New Features
  • Plugin system
  • Added .sticky position utility
  • Added .cursor-wait and .cursor-move utilities
  • Added .bg-auto background size utility
  • Background sizes are now customizable
  • Support for active variants
  • Better postcss-import support
  • Configuration options for the .container component
• Changes
  • The .container component is now a built-in plugin
  • State variant precedence changes
  • New config file keys
  • .overflow-x/y-scroll now set overflow: scroll instead of overflow: auto
  • .roman renamed to .not-italic

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:

• Add plugin system
• Support CSS-in-JS syntax in 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**](https://github.com/tailwind) preflight or [**tailwind**](https://github.com/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**](https://github.com/tailwind) preflight and another new file just for [**tailwind**](https://github.com/tailwind) utilities, and then [**import**](https://github.com/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**](https://github.com/import) "tailwindcss/preflight";

[**import**](https://github.com/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**](https://github.com/tailwind) components directive to your CSS:

  [**tailwind**](https://github.com/tailwind) preflight;
  
+ [**tailwind**](https://github.com/tailwind) components;
  
  [**tailwind**](https://github.com/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.

• Use global.Object to avoid issues with polyfills when importing the Tailwind config into other JS (#402)

• Fix an issue where borders couldn't be applied to img tags without specifying a border style (#362, #363)
• Add support for using a function to define class prefixes in addition to a simple string (#367)
• Improve the performance of [**apply**](https://github.com/apply) by using a lookup table instead of searching (#401)

Commits

• 8537ceb Add sticky utility
• 6837c8f Added .cursor-wait
• db11e99 Documented .cursor-wait
• 5acfa18 Add bg-auto to the backgroundSize generator
• 4519c1f Add bg-auto to the backgroundSize docs
• 8f66028 Update tests for bg-auto
• 8295766 Allow users to set their own backgroundSize
• 3f9fc5a Rename backgroundSize to backgroundSizes
• 6493bda Undo border-style reset Normalize applies to images
• cd2f855 Merge pull request #363 from tailwindcss/fix-362
• Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

If you'd like to skip this version, you can just close this PR. If you have any feedback just mention @dependabot in the comments below.

[dependabot-preview]

Superseded by #110.