tailwindcss 0.6.0

v0.6.0

on Node.js NPM

• New Features
  • Added border collapse utilities for styling tables
  • Added more axis-specific overflow utilities
  • Added .outline-none utility for suppressing focus styles
  • Added .shadow-outline utility as an alternative to default browser focus styles
  • Extended default padding, margin, negative margin, width, and height scales
  • Enable focus and hover variants for more modules by default
• Changes
  • Removed default outline: none !important styles from focusable but keyboard-inaccessible elements
  • Moved screen prefix for responsive group-hover variants
  • Default config file changes

New Features

Added border collapse utilities for styling tables (#489)

Tailwind now includes .border-collapse and .border-separate utilities for controlling the border-collapse property.

By default we don't generate any variants for these utilities (not even responsive variants) but you can change this through the borderCollapse module your Tailwind configuration file.

We've also updated Preflight to set border-collapse: collapse by default on all tables.

Added more axis-specific overflow utilities (#445)

In addition to .overflow-hidden and .overflow-visible, Tailwind now includes .overflow-x-hidden, .overflow-y-hidden, .overflow-x-visible and .overflow-y-visible for controlling overflow along a specific axis.

Added .outline-none utility for suppressing focus styles (#491)

Tailwind now includes a .outline-none utility for setting outline: 0 on an element to prevent the default browser focus ring.

By default, we also generate a focus variant (focus:outline-none) but no responsive variants.

Added .shadow-outline utility as an alternative to default browser focus styles (#491)

Outlines don't follow an element's border radius in most browsers, so a common practice is disable the browser's default focus outline and use a colored box-shadow to highlight focused elements.

Tailwind now includes a blue .shadow-outline utility that can be used for this purpose.

We've also enabled focus variants for box shadows by default, so you can add an outline shadow on focus by doing something like this:

<button class="focus:outline-none focus:shadow-outline ..."></button>

Extended default padding, margin, negative margin, width, and height scales (#499)

Tailwind's default configuration now includes more padding, margin, and negative margin sizes:

  padding/margin/negativeMargin: {
    'px': '1px',
    '0': '0',
    '1': '0.25rem',
    '2': '0.5rem',
    '3': '0.75rem',
    '4': '1rem',
+   '5': '1.25rem',
    '6': '1.5rem',
    '8': '2rem',
+   '10': '2.5rem',
+   '12': '3rem',
+   '16': '4rem',
+   '20': '5rem',
+   '24': '6rem',
+   '32': '8rem',
  }

We've also added 5 to the height and width scales to avoid any holes when compared with the spacing scales:

  width/height: {
    'auto': 'auto',
    'px': '1px',
    '1': '0.25rem',
    '2': '0.5rem',
    '3': '0.75rem',
    '4': '1rem',
+   '5': '1.25rem',
    '6': '1.5rem',
    '8': '2rem',
    '10': '2.5rem',
    '12': '3rem',
    '16': '4rem',
    '24': '6rem',
    '32': '8rem',
    '48': '12rem',
    '64': '16rem',
    // ...
  }

Enable focus and hover variants for more modules by default (#498)

Tailwind now includes focus and hover variants for more utilities out of the box.

We've added:

• Focus variants for background colors
• Focus variants for border colors
• Focus variants for font weight
• Hover and focus variants for box shadows
• Focus variants for text colors
• Focus variants for text style (underline, capitalization, etc.)

That means you do things like style an input differently based on whether it currently has focus:

<input class="border border-transparent bg-grey-lighter focus:bg-white focus:border-blue-light">

This was always possible if you had focus variants enabled in your own configuration, but Tailwind 0.6.0 sets these up for you out of the box so you don't need to make this common configuration change yourself. It also makes our CDN builds a little more powerful.

Changes

Removed default outline: none !important styles from focusable but keyboard-inaccessible elements (#491)

Impact: Low, Effort: Low

Prior to 0.6.0, our Preflight base styles included this rule (borrowed from suitcss/base):

/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}

This is a useful default for many projects, but in the odd case that it's problematic for you it is really annoying to work around.

With the addition of the .outline-none helper, we think it makes sense to remove this default style and encourage people to simply add focus:outline-none to any focusable but keyboard-inaccessible elements:

- <div tabindex="-1" class="...">...</div>
+ <div tabindex="-1" class="focus:outline-none ...">...</div>

Of course, you can also reintroduce this rule into your own base styles after Preflight:

  @tailwind preflight;
  
+ [tabindex="-1"]:focus {
+   outline: none !important;
+ }
  
  @tailwind components;
  
  @tailwind utilities;

Moved screen prefix for responsive group-hover variants (#497)

Impact: Low, Effort: Medium

Prior to 0.6.0, if you had responsive and group-hover variants enabled for a module, the resulting CSS rule for a responsive group-hover variant would look something like this:

.sm\:group .group-hover\:bg-red { ... }

This was just a consequence of the responsive variants implementation and wasn't something we intentionally designed. It allowed you to do stuff like this:

<!-- Parent only behaves like a group on large screens and up, so the child -->
<!-- remains blue on small screens even when the parent is hovered. -->
<div class="lg:group">
  <div class="bg-blue group-hover:bg-red">...</div>
</div>

This is not very useful in practice, and actually prevented you from changing how an element itself responded to group-hover on different screen sizes:

<div class="group">
  <!-- Element was always red, even on small screens and up -->
  <div class="group-hover:bg-red sm:group-hover:bg-blue">...</div>
</div>

In 0.6.0, the group-hover part of the selector adopts the screen prefix instead of the group part, so the code snippet from above will now work.

I would bet $100 that zero Tailwind users were depending on the pre-0.6.0 behavior, but if you were, the best solution is to write your own CSS for those parts of your project.

Default config file changes

Impact: Low, Effort: Low

The default config file now includes more padding, margin, negative margin, height, and width sizes; a new borderCollapse entry in the modules section; and enables more variants for more modules by default.

All the changes are purely additive, so you don't actually have to change any existing config files — all of your existing projects will work the same in 0.6.0 aside from the two breaking changes mentioned earlier in this changelog.

If you'd like to upgrade your config file to match the current default config file, you can view a diff of the changes here.