Releases: tailwindlabs/tailwindcss
v1.2.0-canary.6
- Add system-ui to default font stack (#1326)
- Add shadow-xs, increase shadow-sm alpha to 0.05 (#1333)
- Support import syntax even without postcss-import (#1336)
- Alias tailwind bin to tailwindcss (e988185)
- Add fill/stroke to transition-colors (#1351)
- Add transition-shadow, add box-shadow to default transition (#1352)
- Combine gap/columnGap/rowGap (#1353)
- Add grid row utilities (#1355)
- Add skew utilities (#1356)
- Use font-sans as default font (#1357)
v1.2.0-canary.5
- Adds missing dependency
resolve
which is required for making config dependencies watchable
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@canary
New 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-md
utility - Add
shadow-sm
utility - 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
plugin
andplugin.withOptions
APIs
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
plugin
andplugin.withOptions
APIs for plugin developers (#1268)
v1.1.4
v1.2.0-canary.1
- Don't watch
node_modules
files for changes, fixed significant build performance regression in v1.2.0-canary.0 (#1179)