Releases: tailwindlabs/tailwindcss
v1.2.0-canary.4
Please note: This is a pre-release, which means (although I'm not planning on it) these new features could change before the stable version of 1.2.0 is released.
Tailwind CSS v1.2.0-canary.4
This is probably the most exciting feature release in the history of Tailwind, so put on your seat belts.
Installation
While v1.2.0 is in pre-release, install it using:
# Using npm
npm install tailwindcss@canary
# Using yarn
yarn add tailwindcss@canaryNew Features
- CSS Transition support
- CSS Transform support
- CSS Grid support
- New max-w-{screen} utilities
- Added max-w-none utility
- Added "Inter" to the default sans-serif font stack
- Add
rounded-mdutility - Add
shadow-smutility - Added stroke-width utilities
- Added additional display utilities for table elements
- Added box-sizing utilities
- Added clear utilities
- Config file dependencies are now watchable
- Allow plugins to extend the user's config
- Add new
pluginandplugin.withOptionsAPIs
CSS Transition support (#1273)
Tailwind now includes utilities for setting the transition-property, transition-duration, and transition-timing-function properties.
<button class="opacity-50 hover:opacity-100 transition-opacity duration-100 ease-out">...</button>Expand to see the default values for these utilities
// tailwind.config.js
module.exports = {
theme: {
// .transition-{property}
transitionProperty: {
none: 'none',
all: 'all',
default: 'background-color, border-color, color, opacity, transform',
colors: 'background-color, border-color, color',
opacity: 'opacity',
transform: 'transform',
},
// .ease-{timingFunction}
transitionTimingFunction: {
linear: 'linear',
in: 'cubic-bezier(0.4, 0, 1, 1)',
out: 'cubic-bezier(0, 0, 0.2, 1)',
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
},
// .duration-{duration}
transitionDuration: {
'75': '75ms',
'100': '100ms',
'150': '150ms',
'200': '200ms',
'300': '300ms',
'500': '500ms',
'700': '700ms',
'1000': '1000ms',
},
}
}For more information, check out the pull request.
CSS Transform support (#1272)
Tailwind now includes utilities for scaling, rotating, translating, and skewing elements.
<span class="transform scale-150 rotate-45 translate-x-full origin-center"></span>Expand to see the default values for these utilities
// tailwind.config.js
module.exports = {
theme: {
// .origin-{origin}
transformOrigin: {
center: 'center',
top: 'top',
'top-right': 'top right',
right: 'right',
'bottom-right': 'bottom right',
bottom: 'bottom',
'bottom-left': 'bottom left',
left: 'left',
'top-left': 'top left',
},
// .scale-{scale}
// .scale-x-{scale}
// .scale-y-{scale}
scale: {
'0': '0',
'50': '.5',
'75': '.75',
'90': '.9',
'95': '.95',
'100': '1',
'105': '1.05',
'110': '1.1',
'125': '1.25',
'150': '1.5',
},
// .rotate-{angle}
rotate: {
'-180': '-180deg',
'-90': '-90deg',
'-45': '-45deg',
'0': '0',
'45': '45deg',
'90': '90deg',
'180': '180deg',
},
// .translate-{distance}
// .translate-x-{distance}
// .translate-y-{distance}
// .-translate-{distance}
// .-translate-x-{distance}
// .-translate-y-{distance}
translate: (theme, { negative }) => ({
...theme('spacing'),
...negative(theme('spacing')),
'-full': '-100%',
'-1/2': '-50%',
'1/2': '50%',
full: '100%',
}),
// .skew-x-{amount}
// .skew-y-{amount}
skew: {},
}
}One notable difference in how this works vs. other utilities in Tailwind is that the transform utility acts sort of like a "toggle" — you need to add that class to "enable" transforms on an element but on its own it doesn't actually apply any transforms.
You apply the actual transforms by stacking additional utilities for the types of transforms you'd like to apply, like scale-150 to scale an element to 150% of its size, or rotate-45 to rotate it 45 degrees.
Note that while we have provided sensible defaults for scale, rotate, and translate, we do not include any default values for skew. If you'd like to add skew utilities to your project, add the values you need under the skew key in your theme.
To make it possible to compose multiple transforms like this, we've implemented this feature using CSS custom properties, which means transforms in Tailwind are not supported in IE11. If you need to support IE11 and would like to use transforms in your project, you'll need to write custom CSS as you would have in earlier versions of Tailwind.
For more information, check out the pull request.
CSS Grid utilities (#1274)
Tailwind now includes utilities for CSS Grid Layout.
<div class="grid grid-cols-2 lg:grid-cols-8 gap-6">
<div class="col-span-1 lg:col-span-3"></div>
<div class="col-span-1 lg:col-span-3"></div>
<div class="col-start-1 col-end-3 lg:col-start-4 lg:col-end-8"></div>
<div class="col-span-1 col-start-1 lg:col-span-4 lg:col-start-2"></div>
<div class="col-span-1 col-end-3 lg:col-span-6 lg:col-end-9"></div>
</div>Expand to see the default values for these utilities
// tailwind.config.js
module.exports = {
theme: {
// .gap-{spacing}
gap: theme => theme('spacing'),
// .row-gap-{spacing}
rowGap: {},
// .col-gap-{spacing}
columnGap: {},
// .grid-cols-{cols}
gridTemplateColumns: {
none: 'none',
'1': 'repeat(1, minmax(0, 1fr))',
'2': 'repeat(2, minmax(0, 1fr))',
'3': 'repeat(3, minmax(0, 1fr))',
'4': 'repeat(4, minmax(0, 1fr))',
'5': 'repeat(5, minmax(0, 1fr))',
'6': 'repeat(6, minmax(0, 1fr))',
'7': 'repeat(7, minmax(0, 1fr))',
'8': 'repeat(8, minmax(0, 1fr))',
'9': 'repeat(9, minmax(0, 1fr))',
'10': 'repeat(10, minmax(0, 1fr))',
'11': 'repeat(11, minmax(0, 1fr))',
'12': 'repeat(12, minmax(0, 1fr))',
},
// .col-{value}
gridColumn: {
auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-7': 'span 7 / span 7',
'span-8': 'span 8 / span 8',
'span-9': 'span 9 / span 9',
'span-10': 'span 10 / span 10',
'span-11': 'span 11 / span 11',
'span-12': 'span 12 / span 12',
},
// .col-start-{value}
gridColumnStart: {
auto: 'auto',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',
},
// .col-end-{value}
gridColumnEnd: {
auto: 'auto',
'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',
},
// .grid-rows-{rows}
gridTemplateRows: {},
// .row-{value}
gridRow: {},
// .row-start-{value}
gridRowStart: {},
// .row-end-{value}
gridRowEnd: {},
}
}By default we ship the necessary utilities to construct grids with 1–12 columns and place elements anywhere in that grid, but we don't include any default utilities for controlling rows or row placement. Those utilities are supported out of the box though, you just need to add the values you need to your config file.
Note that the approach we've taken to supporting CSS Grid is not compatible with IE11. For building grid layouts in older browsers, we recommend using Flexbox instead of CSS Grid.
For more information, check out the pull request.
New max-w-{screen} utilities (#1284)
Tailwind's default max-width scale now includes values to match your b...
v1.2.0-canary.2
- Add new
pluginandplugin.withOptionsAPIs for plugin developers (#1268)
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...