Releases: tailwindlabs/tailwindcss
v1.1.4
v1.2.0-canary.1
- Don't watch
node_modulesfiles for changes, fixed significant build performance regression in v1.2.0-canary.0 (#1179)
v1.1.3
v1.2.0-canary.0
v1.1.2
v1.1.1
v1.1.0
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), andnth-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.
Changes
- New features
- Added utilities for screenreader visibility
- Added utilities for placeholder color
- First, last, even, and odd child variants
- Disabled variant
- Visited variant
- Increase utility specificity using a scope instead of
!important - Add hover/focus variants for opacity by default
- Added
border-doubleutility - Support negative prefix for boxShadow and letterSpacing plugins
- Support passing config path via object
- Fixes
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 thi...