Releases: tailwindlabs/tailwindcss
v0.7.1
v0.7.0
New Features
Registering new variants from plugins (#505)
(Introduced as an experiment in v0.6.2, now promoted to an official feature)
Plugins can now add their own variants (like hover, focus, group-hover, etc.) to Tailwind.
To get started, destructure the new addVariant function from the object passed to your plugin, and call it with the name of the variant you'd like to add and a callback that can be used to manipulate the PostCSS nodes where the variant is being applied:
module.exports = {
plugins: [
function({ addVariant }) {
addVariant('important', ({ container }) => {
container.walkRules(rule => {
rule.selector = `.\\!${rule.selector.slice(1)}`
rule.walkDecls(decl => {
decl.important = true
})
})
})
}
]
}Documentation is coming soon, but for now learn more in the pull request.
Variant order can be customized per module (#505)
(Introduced as an experiment in v0.6.2, now promoted to an official feature)
Variants are now generated in the order that they are specified in the modules section of your config file, rather than in a hard-coded static order like in previous versions of Tailwind.
That means that if you want focus variants to defeat hover variants for background colors, but you want the opposite behavior for border colors, you can actually do that now by specifying the order in your config:
modules.exports = {
// ...
modules: {
// ...
backgroundColors: ['responsive', 'hover', 'focus'],
// ...
borderColors: ['responsive', 'focus', 'hover'],
// ...
}
}Note that this doesn't affect responsive variants — those are a special case since responsive versions are also generated for other variants, and we group responsive declarations to optimize the resulting CSS.
Added focus-within variant (#463)
Tailwind now includes a focus-within variant that you can use to change how an element is styled if an element inside of it has focus.
<div class="focus-within:shadow-lg">
<label>
<span>Email</span>
<input type="email">
</label>
</div>Learn about the :focus-within pseudo-class on MDN
By default we don't generate focus-within variants for any utilities, but you can change this in the modules section your Tailwind configuration file:
modules.exports = {
// ...
modules: {
// ...
- backgroundColors: ['responsive', 'hover', 'focus'],
+ backgroundColors: ['responsive', 'focus-within', 'hover', focus'],
// ...
}
}Fancy CLI updates (#554)
Tailwind 0.7.0 includes a completely rewritten CLI tool with nicer output and a better user experience.
All of the existing functionality is still there with the same API, it just looks better.
Option to generate config without comments (#558)
You can now use the --no-comments option when running tailwind init to generate a config file that excludes all of the inline documentation comments.
This is a great way to make your config file easier to skim if you're an experienced Tailwind user who doesn't need the comments.
Make configured prefix optional when using @apply (#553)
If you're prefixing your generated utilities, including that prefix when using @apply is now optional.
/* Before */
.my-component {
@apply tw-bg-blue tw-text-white tw-font-bold;
}
/* Now */
.my-component {
@apply bg-blue text-white font-bold;
}You can continue to use the prefix if you like, or drop it if you prefer a terser syntax.
Improve Flexbox behavior in IE 10/11 (#550)
IE 10 and 11 interpret the shorthand flex property differently than other browsers.
Tailwind now specifies explicit grow, shrink, and basis values for the flex-1, flex-auto, and flex-initial utilities for a more consistent cross-browser experience.
Learn more at the flexbugs repo (bugs #4 and #6 specifically)
Changes
Variant order in modules config is now significant (#505)
Impact: Low, Effort: Low
Prior to 0.7.0, variants were always generated in the same order, regardless of the order specified in the modules section of your config file.
Now, variants are generated in the they are specified. That means that if your config file currently lists variants in a different order than the <=0.6.6 default variant order, those variants will appear in a different order in your CSS.
To preserve the <=0.6.6 behavior, simply edit the modules section of your config file to make sure your variants are listed in the following order:
modules.exports = {
// ...
modules: {
// ...
[anyModule]: ['group-hover', 'hover', 'focus-within', 'focus', 'active']
// ...
}
}Normalize.css updated to v8.0.0 (#537)
Impact: Low, Effort: Low
We've updated our dependency on Normalize.css from 7.0.0 to 8.0.0.
This drops support for very old browsers like IE9, Android 4.3, Safari 8, and iOS Safari 7-8.
If you still need to support those browsers, remove @tailwind preflight from your CSS, add Normalize.css 7.0.0 to your project, and manually add our additional preflight base styles.
Removed CSS fix for Chrome 62 button border radius change (#579)
Impact: Low, Effort: Low
When Chrome 62 was released, it introduced a user agent stylesheet change that added a default border radius to all buttons.
This messed up styles for like half of the internet (including sites like GitHub itself), so Chrome reverted the change in Chrome 63.
We included a fix for this in Tailwind with the intention to remove it when Chrome 62 was no longer in common use. Now that usage has dropped to 0.09%, we've removed our fix.
If this is a problem for you (it isn't), you can add the removed styles back to your project right after @tailwind preflight.
v0.6.6
- Promote
shadowLookupfrom experiment to official feature
v0.6.5
v0.6.4
v0.6.3
v0.6.2
New Features
Added table layout utilities for styling tables (#504)
Tailwind now includes .table-auto and .table-fixed utilities for controlling the table-layout property.
By default we only generate responsive variants for these utilities but you can change this through the tableLayout module your Tailwind configuration file.
We've also updated Preflight to set border-collapse: collapse by default on all tables.
Configuration can now be passed as an object (#508)
Normally you pass your configuration to Tailwind by giving it a path:
// .postcssrc.js or similar
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss')('./tailwind.js'),
]
}
Now you can also pass an object directly:
// .postcssrc.js or similar
const tailwindConfig = {
// ...
}
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss')(tailwindConfig),
]
}
Note that we still recommend passing a path instead of an object, because Tailwind can't rebuild when the config changes if it doesn't have a config file to watch.
Changes
Default config file changes
Impact: Low, Effort: Low
The default config file now includes a new tableLayout entry in the modules section.
Simply add this to your config file to sync it with this change, or leave it out if you just want to inherit the default configuration for the new module:
module.exports = {
// ...
modules: {
// ...
svgStroke: [],
+ tableLayout: ['responsive'],
textAlign: ['responsive'],
// ...
}
}Experiments
Tailwind 0.6.2 includes two new major features that are disabled by default behind flags.
These features may be changed or removed at any time without any regard for semantic versioning, so please do not depend on them in production just yet.
Registering new variants from plugins (#505)
Plugins can now add their own variants (like hover, focus, group-hover, etc.) to Tailwind.
To get started, destructure the new addVariant function from the object passed to your plugin, and call it with the name of the variant you'd like to add and a callback that can be used to manipulate the PostCSS nodes where the variant is being applied:
module.exports = {
plugins: [
function({ addVariant }) {
addVariant('important', ({ container }) => {
container.walkRules(rule => {
rule.selector = `.\\!${rule.selector.slice(1)}`
rule.walkDecls(decl => {
decl.important = true
})
})
})
}
]
}Proper documentation will be provided when this feature is stable and official, but in the mean time you can learn more by reading this comment from the pull request.
To enable this experiment, add pluginVariants: true under an experiments key in your Tailwind config:
module.exports = {
// ...
experiments: {
pluginVariants: true
}
}Allow @apply-ing classes that aren't defined but would be generated (#516)
You can now use @apply to apply classes that aren't defined but would exist if @tailwind utilities was included in the same CSS file. This is mostly useful on projects that are setup to process multiple styles independently, for example a Vue.js project where you are using the <style> block of your single file components.
To enable this experiment, add shadowLookup: true under an experiments key in your Tailwind config:
module.exports = {
// ...
experiments: {
shadowLookup: true
}
}v0.6.1
v0.6.0
- New Features
- Added border collapse utilities for styling tables
- Added more axis-specific overflow utilities
- Added
.outline-noneutility for suppressing focus styles - Added
.shadow-outlineutility 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
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.
v0.5.3
- Improve sourcemaps for replaced styles like
preflight - Fix bug where informational messages were being logged to stdout during build, preventing the ability to use Tailwind's output in Unix pipelines