Beta test the new features coming in Tailwind CSS v3.2

[adamwathan]

Hey everyone! We're planning to release Tailwind CSS v3.2 in the next couple of weeks, and we'd love to get some more people flexing the new features we're working on before we tag it and can't turn back.

A lot of the new things we've been working on this time around involve brand new syntax and concepts. With Tailwind being such a widely used tool these days, we'd really love for people to put this stuff to test ahead of the release and make sure we aren't making any API decisions that create really painful integration problems when working with tools we don't use ourselves.

To install the latest pre-release, install our insiders build from npm:

npm install -D tailwindcss@insiders

You can also try the new features directly in Tailwind Play by choosing "Insiders" from the version dropdown, but it's better for us if you actually install it in your project so we can get more information about how all this stuff is going to work alongside different UI libraries, templating languages, and build tools.

Here's a breakdown of the new stuff we'd love some help putting through its paces!

• Multiple config files in one project using @config
• New variant for @supports rules
• Dynamic group-[...] and peer-[...] variants
• Parameterized variants with matchVariant
• Nested group and multiple peer support using <labels>

---

Multiple config files in one project using @config

We've added a new @config directive that you can use in a CSS file to specify which Tailwind CSS config to use for that file:

@config "./tailwind.admin.config.js"
@tailwind base;
@tailwind components;
@tailwind utilities;

This makes it a lot easier to build multiple stylesheets in a single project that have separate Tailwind configurations. For example, you might have one config file for the customer-facing part of your site, and another config for the admin/backend area.

Config files specified with @config are resolved relative to the CSS file where the @config directive is being used.

One known pain-point right now is that when using postcss-import, you can't put @config at the top of the file because postcss-import is strict about all @import statements having to come first as per the CSS spec. We might wrap postcss-import with our own import plugin to remove this limitation, but for now if you're using @import statements, your @config directive will need to come after them:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@config "./tailwind.admin.config.js";

The Tailwind CSS IntelliSense plugin also doesn't have support for this stuff in any sort of automatic way yet, so you might not see the completions you expect depending on how you have things configured. We're working on this though, and hope to have a solution in place before the actual v3.2 release.

---

New variant for @supports rules

You can now conditionally style things based on whether a certain feature is supported in the user's browser with the supports-[...] variant, which generates @supports rules under the hood.

<div class="flex supports-[display:grid]:grid ...">
  <!-- ... -->
</div>

The supports-[...] variant takes anything you'd use with @supports (...) between the square brackets, like a property/value pair, and even expressions using and and or.

For terseness, if you only need to check if a property is supported (and not a specific value), you can just specify the property name:

<div class="bg-black/75 supports-[backdrop-filter]:bg-black/25 supports-[backdrop-filter]:backdrop-blur ...">
  <!-- ... -->
</div>

---

Dynamic group-[...] and peer-[...] variants

We're making it possible to create custom group-* and peer-* variants on the fly by passing your selector between square brackets

<div>
  <!-- ... -->
  <a class="peer" href="#">...</a>
  <a class="peer-[:local-link]:ml-3">
    <!-- ... -->
  </a>
  <!-- ... -->
</div>

Whatever you pass will just get tacked on to the end of the .group or .peer class in the selector by default, but if you need to do something more complex you can use the & character to mark where .group/.peer should end up in the final selector relative to the selector you are passing in

<div class="group">
  <div class="group-[:nth-of-type(3)_&]:border-black">
    <!-- ... -->
  </div>
</div>

---

Parameterized variants with matchVariant

Both the new supports-[..] feature and dynamic group-*/peer-* variants are powered by a new matchVariant plugin API that you can use to create your own dynamic/parameterized variants.

Here's an example of creating a placement-* variant for some imaginary tooltip library that uses a data-placement attribute to tell you where the tooltip is currently positioned:

let plugin = require("tailwindcss/plugin");

module.exports = {
  // ...
  plugins: [
    plugin(function ({ matchVariant }) {
      matchVariant(
        "placement",
        ({ value }) => {
          return `&[data-placement=${value}]`;
        },
        {
          t: "top",
          r: "right",
          b: "bottom",
          l: "left",
        }
      );
    }),
  ],
};

The variant defined above would give you variants like placement-t and placement-b, but would also support the arbitrary portion in square brackets, so if this imaginary tooltip library had other potential values that you didn't feel the need to create built-in values for, you could still do stuff like this:

<div class="placement-[top-start]:mb-2 ...">
  <!-- ... -->
</div>

When defining a custom variant with this API, it's often important that you have some control over which order the CSS is generated in to make sure each class has the right precedence with respect to other values that come from the same variant. To support this, there's a sort function you can provide when defining your variant:

matchVariant("min", ({ value }) => `@media (min-width: ${value})`, {
  sort(a, z) {
    return parseInt(a) - parseInt(z);
  },
});

---

Nested group and multiple peer support using <labels>

Sometimes you can run into problems when you have multiple group chunks nested within each other because Tailwind has no real way to disambiguate between them.

To solve this, we're trying out this new idea called labels, which are a new dynamic chunk that lives in the variant that you can use to give each group/peer your own identifier.

Here's what it looks like:

<div class="group<sidebar> ...">
  <!-- ... -->
  <div class="group<navitem> ...">
    <a href="#" class="bg-black/25 group<sidebar>-hover:bg-black/50 group<navitem>-hover:bg-black/75">...</a>
  </div>
  <!-- ... -->
</div>

This lets you give each group a clear name that makes sense for that context on the fly, and Tailwind will generate the necessary CSS to make it work.

I'm really excited to have a solution out there for this because it's something I've been trying to land on a good approach for solving for several years, and this is the first thing we've come up with that really feels like it offers the power and flexibility I think it should.

This feature is probably the riskiest one in terms of creating issues with different tools though, because we're using new characters in the class names (< and >). So really flex this one and see how it works for you in your projects with the other libraries and build tools you like to use.

---

So that's everything! We have a few other smaller ideas we might try to squeeze in before now and the actual release, but this is all of the stuff I'd really appreciate help testing so we can make any API changes we need to make before it's too late and we become prisoners to the cruel bastard that is semantic versioning.

So install tailwindcss@insiders, beat the hell out of it, and let us know what you find!

[didier]

Though I understand the use-case, I can't possibly imagine writing <a href="#" class="bg-black/25 group<sidebar>-hover:bg-black/50 group<navitem>-hover:bg-black/75">...</a> without wanting to throw my laptop at a wall...

[RobinMalfait]

@brandonmcconnell thats not entirely true. String interpolation only happens when using back ticks ` and if you use a $ in front of the first {. So that should not be an issue. It looks a bit odd though.

[RobinMalfait]

@AmProsius sorry I use the wrong code in the example. We were still figuring things out there.

It would be like:

<div class="group/foo">
  <div class="group-hover/foo:underline"></div>
</div>

[brandonmcconnell]

@brandonmcconnell thats not entirely true. String interpolation only happens when using back ticks ` and if you use a $ in front of the first {. So that should not be an issue. It looks a bit odd though.

@RobinMalfait At least in svelte, interpolation happens even when using regular quotes, e.g. class="group/{group}"

☝🏼 this will interpolate

[brandonmcconnell]

@AmProsius sorry I use the wrong code in the example. We were still figuring things out there.

It would be like:

<div class="group/foo">
  <div class="group-hover/foo:underline"></div>
</div>

@RobinMalfait I'm very curious… Why group-hover/name and snot group/name-hover?

[adamwathan]

To be consistent with the modifier placement in classes like bg-black/50 and to make it possible to use dashes in the modifier like group-hover/main-nav 👍🏻

[dtydev]

Hello
Have you planned any new features for the "Play CDN"?
For example, being able to isolate "style" with custom classes?
This would be appreciated for small projects.
Thanks for the job you do!

[czernika]

Some comments on matchVariant

1. I see editor complaining about 3rd argument as matchVariant in config.d.ts has 2 arguments

See this TailwindPlay

2. In your example default values for "placement" dynamic variant

{
    t: "top",
    r: "right",
    b: "bottom",
    l: "left",
}

should be under values key - it got me confused why it's not working :)

{
    values: {
        t: "top",
        r: "right",
        b: "bottom",
        l: "left",
    }
}

[colinaut]

I like the use of / as it conceptually feels like system folders and makes sense being a subset of the former

…

On Sun, Oct 9, 2022 at 6:40 AM Brandon McConnell ***@***.***> wrote: Personally, I feel like using a dot . feels to similar to a plain CSS class name which this is not, so I’d want to avoid that. @adamwathan <https://github.com/adamwathan> What are the factors you’re considering in the placement/order of hover in group<label>-hover and group-hover/label. Why in one is the label director after group but after the hover in the other? Would these two concepts have the same effect? — Reply to this email directly, view it on GitHub <#9504 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA7WGVEUVTRS7DGWKZ34DDWCLDM5ANCNFSM6AAAAAAQ7WS4Z4> . You are receiving this because you commented.Message ID: ***@***.*** com>

[wongjn]

Is it expected to get the following error with npm v8 when installing insiders with the core plugins?

> npm i -D tailwindcss@insiders @tailwindcss/typography

code ERESOLVE
ERESOLVE unable to resolve dependency tree

While resolving: undefined@undefined
Found: [email protected]
node_modules/tailwindcss
  tailwindcss@"0.0.0-insiders.c5ca373" from the root project

Could not resolve dependency:
peer tailwindcss@">=3.0.0 || insiders" from @tailwindcss/[email protected]
node_modules/@tailwindcss/typography
  @tailwindcss/typography@"*" from the root project

[jonnitto]

I have integrated it into a project, and everything runs smoothly. Especially the <label> feature is excellent and solves many problems. I have also already equipped a few internal plugins with matchVariant, everything runs without problems.

[VicGUTT]

Exciting stuff ! 👌

I see a nice opportunity for out-of-the-box support of :has here thanks to matchVariant. Has this been considered?

[davidhellmann]

Great! Like the Multiconfig feature a lot. Its great for special sites within a site like a Conference website. Thanks for that! 🔥

[michaelchiche]

is the nested group syntax available on the playground yet? and using which format ?
This is an amazing feature