Tailwind CSS v1.1

The first new feature release since v1.0 has arrived! Tailwind v1.1 includes a bunch of new stuff, but I think the things you'll probably be most excited about are:

New screenreader visibility utilities
New utilities for setting the placeholder color on form elements
New variants for first-child, last-child, nth-child(odd), and nth-child(even)

Important note — although this is a minor release, it includes two bug fixes that may have a superficial impact on how your site looks if you are using horizontal rules in your site or are relying on the default placeholder color defined in Tailwind's base styles.

Be sure to read through the fixes section before upgrading to understand the impact.

New features

Added utilities for screenreader visibility (#964)

Tailwind now includes a new accessibility core plugin that adds sr-only and not-sr-only utilities for controlling whether an element is visually hidden but still accessible to screen readers.

Use sr-only to hide an element visually without hiding it from screen readers:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

By default, responsive and focus variants are generated for these utilities. You can use focus:not-sr-only to make an element visually hidden by default but visible when the user tabs to it — useful for "skip to content" links:

<a href="#" class="sr-only focus:not-sr-only">
  Skip to content
</a>

You can customize which variants are generated by adding an accessibility key to the variants section of your config file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    accessibility: ['responsive', 'hover', 'focus', 'active']
  }
}

Added utilities for placeholder color (#1063)

Tailwind now includes placeholder-{color} utilities for setting the placeholder color of form elements:

<input class="text-gray-900 placeholder-gray-500 ...">

By default, responsive and focus variants are generated for these utilities. You can customize which variants are generated by adding a placeholderColor key to the variants section of your config file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    placeholderColor: ['responsive', 'hover', 'focus', 'active']
  }
}

First, last, even, and odd child variants (#1024, #1027)

Tailwind now includes variants for targeting the first-child, last-child, nth-child(odd), and nth-child(even) pseudo-classes.

These allow you to apply a utility to an element only when it is the first, last, odd, or even child of its parent. Very useful for things like "put a border between all of these items that are generated in a loop" for example:

<ul>
  <li v-for="item in items" class="border-t first:border-t-0">{{ item }}</li>
</ul>

...or to add zebra striping to a table:

<table>
  <tr v-for="row in rows">
    <td class="odd:bg-white even:bg-gray-200">...</td>
    <td class="odd:bg-white even:bg-gray-200">...</td>
  </tr>
</table>

The pseudo-classes map to variants as follows:

Pseudo-class	Variant
`:first-child`	`first:{utility}`
`:last-child`	`last:{utility}`
`:nth-child(odd)`	`odd:{utility}`
`:nth-child(even)`	`even:{utility}`

Something worth emphasizing is that these variants apply to the child element itself, not to the children of the element with the utility. This is consistent with how other pseudo-class variants in Tailwind work, and how the :first/last-child pseudo selectors work in CSS.

Said again in code:

<!-- This is *not* how these variants are meant to be used -->
<ul class="first:border-t-0">
  <li v-for="item in items" class="border-t">{{ item }}</li>
</ul>

<!-- The utilities should be used on the child itself, not the parent -->
<ul>
  <li v-for="item in items" class="border-t first:border-t-0">{{ item }}</li>
</ul>

These variants are disabled by default for all utilities, but can be enabled for each core plugin in the variants section of your config file:

  // tailwind.config.js
  module.exports = {
    // ...
    variants: {
-     backgroundColor: ['responsive', 'hover', 'focus']
+     backgroundColor: ['responsive', 'first', 'last', 'even', 'odd', 'hover', 'focus']
    }
  }

Disabled variant (#732)

Tailwind now includes a disabled variant for styling elements when they are disabled:

<input class="disabled:opacity-50 ...">

This variant is disabled by default for all utilities, but can be enabled for each core plugin in the variants section of your config file:

  // tailwind.config.js
  module.exports = {
    // ...
    variants: {
-     opacity: ['responsive', 'hover', 'focus']
+     opacity: ['responsive', 'hover', 'focus', 'disabled']
    }
  }

Visited variant (#976)

Tailwind now includes a visited variant for styling visited links:

<a href="#" class="text-blue-500 visited:text-purple-500 ...">

This variant is disabled by default for all utilities, but can be enabled for each core plugin in the variants section of your config file:

  // tailwind.config.js
  module.exports = {
    // ...
    variants: {
-     textColor: ['responsive', 'hover', 'focus']
+     textColor: ['responsive', 'hover', 'focus', 'visited']
    }
  }

Increase utility specificity using a scope instead of `!important` (#1020)

Prior to Tailwind v1.1, you may have used the important option to make sure that no matter what, your utilities always took precedence over any other styles applied to an element:

// tailwind.config.js
module.exports = {
  important: true,
  // ...
}

This is a totally reasonable thing to do but it can introduce some issues when incorporating third-party JS libraries that add inline styles to your elements, because Tailwind's important utilities would defeat the inline styles. This is really common with animation libraries for example.

Tailwind v1.1 adds the ability to make utilities "important" in a less aggressive manner by providing a selector instead of a boolean to the important option:

// tailwind.config.js
module.exports = {
  important: '#app',
  // ...
}

What this will do is prefix all of your utilities with that selector, increasing their specificity without actually making them !important.

By using an ID for this selector and adding that ID to the root element of your site, all of Tailwind's utilities will have a high enough specificity to defeat all other classes used in your project without interfering with inline styles:

<html>
<!-- ... -->
<style>
  .high-specificity .nested .selector {
    color: blue;
  }
</style>
<body id="app">
  <!-- Will be #bada55 -->
  <div class="high-specificity">
    <div class="nested">
      <!-- Will be red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Will be #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>

If this seems weird or complicated to you, chances are you haven't run into this situation before and can just ignore this feature. If you've been bitten by this problem in the past though, you'll understand exactly why this feature was added.

Add hover/focus variants for opacity by default (#1065)

Opacity utilities now have hover and focus variants enabled by default:

<div class="opacity-50 hover:opacity-100"><!-- ... --></div>

You can disable these if needed by overriding the default opacity variants in the variants section of your config file:

  // tailwind.config.js
  module.exports = {
    // ...
    variants: {
+     opacity: ['responsive']
    }
  }

Added `border-double` utility (#1040)

Tailwind now includes a border-double utility for, well, giving elements a double border.

<div class="border border-double"><!-- ... --></div>

Support negative prefix for boxShadow and letterSpacing plugins (#992)

The boxShadow and letterSpacing plugins now support the negative modifier prefix like zIndex, margin, and inset utilities do:

// tailwind.config.js
module.exports = {
  theme: {
    letterSpacing: {
     '-1': '-.05em',
    },
    boxShadow: {
     '-sm': 'inset 0 2px 4px rgba(0,0,0.1)',
    },
  }
}

This would generate classes like -tracking-1 and -shadow-sm, rather than tracking--1 and shadow--sm like you might expect.

Support passing config path via object (#1062)

When adding Tailwind to your PostCSS config, you can now specify the config file path using an object syntax instead of only a string:

// postcss.config.js
module.exports = {
  plugins: [
    // Existing syntax:
    require('tailwindcss')('custom-config.js'),

    // Added syntax:
    require('tailwindcss')({ config: 'custom-config.js' }),
  ]
}

This makes Tailwind compatible with PostCSS's object configuration syntax, which wasn't previously possible:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: { config: 'custom-config.js' },
  }
}

See the pull request for all of the details on how this works.

Fixes

Placeholders no longer have a default opacity (#1064)

Prior to v1.1, Tailwind included the following base styles for form elements:

input::placeholder, textarea::placeholder {
  color: inherit;
  opacity: 0.5;
}

Due to a bug in IE11, this mistakenly caused the input and textarea elements themselves to be rendered at 50% opacity, not just the placeholders.

We've fixed this in v1.1 by changing the base styles to this:

input::placeholder, textarea::placeholder {
  color: #a0aec0;
}

This sets the default placeholder to Tailwind's gray-500 color instead of inheriting the current color and changing the opacity.

This means that if you weren't assigning a custom placeholder color to your form elements, they will now look a bit different than they did before.

This will be most apparent in situations where you have changed the text color of an input and were relying on the inherit behavior — for example an input with red text where you also want the placeholder to be red.

Now that Tailwind includes placeholder color utilities, you can correct these superficial visual differences by adding a placeholder utility:

<input class="text-red-500 placeholder-red-300">

Make horizontal rules visible by default (#991)

Prior to v1.1, horizontal rules were mistakenly invisible in Tailwind because they had no border-width assigned.

Now hr elements have a default border-width of 1px so they actually show up when you create one.

This is technically a very minor breaking change in the event that you were actually depending on hr elements not having a default border. You can remove the border by adding border-0:

<hr class="border-0">

Generate correct negative margins when using calc (#1058)

Negative margin values were calculated fairly naively in previous versions of Tailwind by simply prefixing the positive value with a -. This of course didn't work if you were using more complex values like calc(100vw - 10rem) or var(--spacing-sm).

Tailwind v1.1 fixes this issue by using calc and the reduce-css-calc package to calculate the correct value to use.

tailwindcss 1.1.0 on Node.js NPM