DEV Community 👩‍💻👨‍💻

Cover image for What's new in Tailwind v3.2
Pavel Štěrba
Pavel Štěrba

Posted on

What's new in Tailwind v3.2

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Styling based on browser support

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>
Enter fullscreen mode Exit fullscreen mode

Styling based on ARIA attribute

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>
Enter fullscreen mode Exit fullscreen mode

Styling based on data attribute

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>
Enter fullscreen mode Exit fullscreen mode

Breakpoint for max width

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>
Enter fullscreen mode Exit fullscreen mode

Nested groups

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
akashpattnaik profile image
Akash Pattnaik

wew, this seems amazing.

Collapse
 
pavelsterba profile image
Pavel Štěrba

I agree, TailwindCSS Team is doing really amazing work here!

Collapse
 
holybean profile image
holybean

Great new features, esp container queries..!

Collapse
 
pavelsterba profile image
Pavel Štěrba

Yep! For me personally, biggest new features are nested groups and styling based on data attribute.

Create an Account!
Now it's your turn!
 
🗒 Share a tutorial
🤔 Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.