What's new in Tailwind v3.2
Tags: css, tailwindcss, news
Published: 2022-11-11 10:02:31

TailwindCSS v3.2 is out for a few weeks and even tho full list of changes is available on [GitHub](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.2.0) or [TailwindCSS Blog](https://tailwindcss.com/blog/tailwindcss-v3-2), 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:

```css
/* 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:

```html
<div class="bg-red-600 supports-[display:grid]:bg-green-600 ...">
  Grid support in browser
</div>
```

![Styling based on browser support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uwwfcb3j0tw55teb10k.png)

## Styling based on ARIA attribute

You can also style conditionally based on ARIA attributes with new `aria-*` variants:

```html
<div class="bg-green-600 aria-hidden:bg-red-600 ..." aria-hidden="true">
  Hidden for screen readers.
</div>
```

![Styling based on ARIA attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9anhpj0kqxnn2oxcog5t.png)

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]`:

```html
<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>
```

![Styling based on data attribute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4s482fnflv4hk7mrjniw.png)

## Breakpoint for max width

New `max-*` variant allows us to apply style until certain breakpoint is reached:

```html
<div class="bg-red-600 max-lg:bg-green-600 ..." aria-hidden="true">
  Green background for small display.
</div>
```

![Breakpoint for max width](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps74zdqll3m4vxm6rgz0.png)

## 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:

```html
<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>
```

![Nested groups](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgmj8fme7dm54zgohzop.png)

## 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:

```html
<div class="@container">
  <div class="block @lg:flex">
    <!-- ... -->
  </div>
</div>
```