Adding variants while supporting group-* and peer-*

[devlzcode]

I want to add some custom variants but the docs specify that group-* and peer-* don't work out of the box with custom variants and I should add variants for those specifically. However in my findings.. they do? Also using addVariant("group-<variantName>", ...) doesn't account for named groups either so whats the tailwind way of doing that?

[wongjn]

You can try following the core plugin code for group-* and peer-*:

tailwindcss/src/corePlugins.js

Lines 155 to 200 in f875ab9

	let variants = {
	group: (_, { modifier }) =>
	modifier
	? [`:merge(${prefix('.group')}\\/${escapeClassName(modifier)})`, ' &']
	: [`:merge(${prefix('.group')})`, ' &'],
	peer: (_, { modifier }) =>
	modifier
	? [`:merge(${prefix('.peer')}\\/${escapeClassName(modifier)})`, ' ~ &']
	: [`:merge(${prefix('.peer')})`, ' ~ &'],
	}
	for (let [name, fn] of Object.entries(variants)) {
	matchVariant(
	name,
	(value = '', extra) => {
	let result = normalize(typeof value === 'function' ? value(extra) : value)
	if (!result.includes('&')) result = '&' + result
	let [a, b] = fn('', extra)
	let start = null
	let end = null
	let quotes = 0
	for (let i = 0; i < result.length; ++i) {
	let c = result[i]
	if (c === '&') {
	start = i
	} else if (c === "'" || c === '"') {
	quotes += 1
	} else if (start !== null && c === ' ' && !quotes) {
	end = i
	}
	}
	if (start !== null && end === null) {
	end = result.length
	}
	// Basically this but can handle quotes:
	// result.replace(/&(\S+)?/g, (_, pseudo = '') => a + pseudo + b)
	return result.slice(0, start) + a + result.slice(start + 1, end) + b + result.slice(end)
	},
	{
	values: Object.fromEntries(pseudoVariants),

With some slight variation to work in custom land: https://play.tailwindcss.com/bQynqFD6AM

[wongjn]

Could you give an example where addVariant() automatically registers relevant group-*/peer-* variants?

[devlzcode]

Could you give an example where addVariant() automatically registers relevant group-*/peer-* variants?

Using Tailwind CSS v4.0 Beta:

   <div class="group" data-test>
      <div class="group-test:text-red-500">
        Hello, world!
      </div>
    </div>

@import "tailwindcss";
@plugin "./plugin.js";

import createPlugin from "tailwindcss/plugin";

export default createPlugin(({ addVariant }) => {
    addVariant("test", "&[data-test]")
})

[wongjn]

Ah OK, v4 is a different story altogether!

[adamwathan]

In v4 the group and peer stuff is indeed all handled automatically 👍 Highly recommend using the CSS syntax by the way instead of the JS APIs, using the JS APIs triggers some very slow backward compatibility code paths that are otherwise completely skipped if we see you are only using modern APIs.

@variant test (&[data-test]);

[devlzcode]

How would I write multiple selectors for a variant or override a previous variant? Afaik this doesn't work (just tried):

@variant invalid (&:where([data-rac])[data-invalid]);
@variant invalid (&:where(:not([data-rac])):invalid);

[devlzcode]

Figured it out, its either:

@variant invalid (&:where([data-rac])[data-invalid], &:where(:not([data-rac])):invalid);

or

@variant invalid {
  &:where([data-rac])[data-invalid] {
    @slot;
  }

  &:where(:not([data-rac])):invalid {
    @slot;
  }
}

Though I'm not sure which one is better for this specific use case.

[devlzcode]

And what about variant values 😅 ?