Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 11, 2022 10:02 am GMT

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;

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

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>

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>

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>

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>

Original Link: https://dev.to/pavelsterba/whats-new-in-tailwind-v32-46m0

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To