TailwindCSS v3.2 is out for a few weeks and even tho full list of changes is available on GitHub or TailwindCSS Blog, let's take a closer look at some features.
Multiple config files
If you are using multiple styles in your project (for example one for web and one for admin section), you can specify, which config file should be used for generating CSS file with new @config directive:
/* web.css */
@config "../tailwind.web.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;
/* admin.css */
@config "../tailwind.admin.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;
Styling based on browser support
Now you can conditionally style elements based on browser support of certain feature with supports-[...] variant:
<div class="bg-red-600 supports-[display:grid]:bg-green-600 ...">
Grid support in browser
</div>
Styling based on ARIA attribute
You can also style conditionally based on ARIA attributes with new aria-* variants:
<div class="bg-green-600 aria-hidden:bg-red-600 ..." aria-hidden="true">
Hidden for screen readers.
</div>
By default, you can use eight most used boolean ARIA values, but can of course add new ones to config file:
- aria-checked
- aria-disabled
- aria-expanded
- aria-hidden
- aria-pressed
- aria-readonly
- aria-required
- aria-selected
Styling based on data attribute
Last conditional styling is based on data attribute with data-[...] variant. There are no default variants generated by TailwindCSS, but you can use easy format data-[key=value]:
<div class="bg-red-600 data-[size=small]:bg-green-600 ..." data-size="small">
data-size="small"
</div>
<div class="bg-red-600 data-[size=small]:bg-green-600 ..." data-size="large">
data-size="large"
</div>
Breakpoint for max width
New max-* variant allows us to apply style until certain breakpoint is reached:
<div class="bg-red-600 max-lg:bg-green-600 ..." aria-hidden="true">
Green background for small display.
</div>
Nested groups
Groups are useful when you need to style elements based on hover on parent element. For that, you can use group and group-hover variant. Since v3.2 you can also nest them with group/name and group-hover/name syntax:
<div class="group/outer ...">
<div class="group/inner ...">
<div class="bg-red-600 group-hover/outer:bg-orange-600 group-hover/inner:bg-green-600 ..."></div>
</div>
</div>
First party plugin for container queries
Container queries are big thing in CSS world and even tho it's not implemented in TailwindCSS core yet, you can use their first party plugin with new @ syntax:
<div class="@container">
<div class="block @lg:flex">
<!-- ... -->
</div>
</div>
Top comments (4)
wew, this seems amazing.
I agree, TailwindCSS Team is doing really amazing work here!
Great new features, esp container queries..!
Yep! For me personally, biggest new features are nested groups and styling based on data attribute.