Last checked and updated on 17 May 2026
What Is New in Tailwind CSS 1.1
| Category | Highlights |
|---|---|
| New Features | sr-only / not-sr-only utilities, placeholder-color utilities, first/last/odd/even child variants, disabled & visited variants, border-double utility, negative prefixes for boxShadow & letterSpacing, object syntax for config path |
| Improvements | Hover/focus variants for opacity enabled by default, utility specificity via selector instead of !important |
| Bug Fixes | Placeholders no longer inherit opacity, hr elements now visible by default, correct negative margins when using calc() |
| Breaking Changes | Default placeholder opacity removed, hr now has a 1 px border, negative-margin calculation adjusted for complex values |
How can I hide content from sighted users while keeping it accessible to screen readers?
The answer is to use the new sr-only and not-sr-only utilities that Tailwind v1.1 adds.
In practice you apply sr-only to hide an element visually but keep it readable by assistive technology, and you can reverse the effect with not-sr-only on larger breakpoints or on focus.
<a href="#">
<svg><!-- ... --></svg>
<span class="sr-only">Settings</span>
</a>
<span class="sr-only sm:not-sr-only">Hidden on mobile, visible on desktop</span>
<a href="#" class="sr-only focus:not-sr-only">Skip to content</a>
These utilities generate responsive and focus variants by default, and you can customise the variant list in the variants.accessibility section of your config.
How do I style placeholder text and form elements more precisely?
The answer is that Tailwind v1.1 introduces placeholder-{color} utilities and removes the old default placeholder opacity.
In practice you now control placeholder colour directly with utilities like placeholder-gray-500 and you no longer need to fight an inherited 0.5 opacity.
<input class="text-red-500 placeholder-red-300 border border-gray-300 p-2">
If you need additional variants (e.g., hover or active) you can extend variants.placeholderColor in your tailwind.config.js.
What new pseudo-class variants are available for targeting child elements?
The answer is that v1.1 adds first, last, odd, and even variants for any core utility.
These let you apply styles only to the first, last, odd-indexed, or even-indexed child of a parent, which is perfect for borders, zebra striping, or spacing in loops.
<ul>
<li class="border-t first:border-t-0">Item 1</li>
<li class="border-t first:border-t-0">Item 2</li>
</ul>
<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>
Enable them per-utility in the variants section, for example adding first and last to backgroundColor.
How can I increase utility specificity without using !important?
The answer is to set the important option to a CSS selector instead of a boolean.
In practice you wrap your app in an element with an ID (or class) and tell Tailwind to prefix every generated utility with that selector, raising specificity without polluting the cascade with !important.
// tailwind.config.js
module.exports = {
important: '#app',
// ...
}
Then in your HTML you add the matching ID:
<body id="app">
<div class="text-red-500">Will win over other classes</div>
</body>
This is especially useful when third-party libraries inject inline styles that would otherwise outrank Tailwind utilities.
What bug fixes should I be aware of when upgrading to v1.1?
The answer is that three key fixes may affect the visual output of existing sites.
- Placeholders now use
gray-500colour and no longer inherit a 0.5 opacity, so inputs that relied on the old behaviour will appear lighter. - Horizontal rules (
hr) now have a default1pxborder, making them visible out-of-the-box; addborder-0to hide them. - Negative margins generated from complex values (e.g.,
calc()or CSS variables) are now calculated correctly usingcalc, which may change the exact pixel output for previously hand-crafted values.
Frequently Asked Questions
Do I need to modify my config to enable the new first/last/odd/even variants?
You add the desired pseudo-class names to the variants array for each core plugin you want to use.
How do I enable the disabled variant for opacity?
Add "disabled" to the opacity variants list in tailwind.config.js.
Can I still use the global important flag as a boolean?
Yes, the boolean form still works; the selector form is an additional option.
What is the recommended way to change placeholder colour?
Use the placeholder-{color} utility, for example placeholder-gray-400.
Will existing hr elements disappear after the upgrade?
No, they will become visible because Tailwind now applies a 1 px border by default.
How do I generate a negative box-shadow utility?
Define a negative key in the boxShadow section of the theme, such as "-sm": "inset 0 2px 4px rgba(0,0,0,0.1)".