Tailwind v1.1 has been released with some cool new features and a couple of bug fixes. This is the first feature release since the Tailwind v1.0 release, so let’s dig into some of the updates.
Screenreader utilities were added
The sr-only and not-sr-only classes were added to make it easier to make your websites accessible. These utilities can be used to hide elements visually, but still accessible to screenreaders. The focus and responsive variants of these utilities are generated by default, but you can customize those in your config file as needed.
Placeholder utilities were added
There are new utilities that allow you to customize the color of placeholder text on your inputs. To use the placeholder utilities, add a placeholder-{color} class to your inputs, replacing {color} with one of the colors from your Tailwind config.
<input class="text-gray-900 placeholder-gray-500 ...">First, last, even, and odd variants were added
first, last, even, and odd variants were added to help target elements that are generated in a loop. They’ll be very helpful when dealing with tables in Tailwind. For more details on how these work, see the release notes.
Disabled and visited variants were added
A disabled variant has been added to help style disabled buttons and form elements without writing custom CSS. A similar visited variant has been added to help style links that have been visited by the user.
Increased specificity when using important
Previously, Tailwind offered an important option in the config file that would add !important to all generated utilities. This could cause some issues with third-party libraries that add inline styles, so now the important option has more flexibility. Instead of passing true to just enable the option, you can pass a CSS selector (something like #app) and the generated classes will be scoped to that selector instead having the !important flag appended. This will make it so your Tailwind classes have more specificity than normal, but they won’t override inline styles.
/* Before */.block { display: block !important;} /* After */#app .block { display: block;}Conclusion
In addition to the features mentioned here, there were several more added, as well as a few bug fixes that I didn’t mention. I highly recommend taking a look at the release notes over on the repo to see all the details about the release, including more code examples.
