[v4] Removing/Disable an existing @custom-variant from production CSS

[rozsazoltan]

Is there a way to disable a previously created @custom-variant to prevent it from being included in production unnecessarily if I don't need it?

• Inspired by: How to disable dark mode in TailwindCSS 4 - however I'm interested not only in dark mode but in any previously declared @custom-variant, including dark mode itself.

  Here, the dependency uses dark mode and has declared dark: classes as well. As a result, the styles for dark: classes will be included in production alongside the default classes - unnecessarily. Even if I override it with @custom-variant as suggested in the answer, the class will still be included in the production CSS unnecessarily.

• TailwindCSS v4 Playground

• What I can imagine for disabling it: false, disabled, none; perhaps none fits the best?

Now generated CSS will be:

.bg-red-400 {
  background-color: var(--color-red-400);
}
.dark\:bg-green-400 {
  disabled {
    background-color: var(--color-green-400);
  }
}

However expected result:

.bg-red-400 {
  background-color: var(--color-red-400);
}

[wongjn]

I don't think there's anyway to remove it. The code for @custom-variant is here:

tailwindcss/packages/tailwindcss/src/index.ts

Lines 266 to 335 in 595b88f

	if (node.name === '@custom-variant') {
	if (parent !== null) {
	throw new Error('`@custom-variant` cannot be nested.')
	}
	// Remove `@custom-variant` at-rule so it's not included in the compiled CSS
	replaceWith([])
	let [name, selector] = segment(node.params, ' ')
	if (!IS_VALID_VARIANT_NAME.test(name)) {
	throw new Error(
	`\`@custom-variant ${name}\` defines an invalid variant name. Variants should only contain alphanumeric, dashes or underscore characters.`,
	)
	}
	if (node.nodes.length > 0 && selector) {
	throw new Error(`\`@custom-variant ${name}\` cannot have both a selector and a body.`)
	}
	// Variants with a selector, but without a body, e.g.: `@custom-variant hocus (&:hover, &:focus);`
	if (node.nodes.length === 0) {
	if (!selector) {
	throw new Error(`\`@custom-variant ${name}\` has no selector or body.`)
	}
	let selectors = segment(selector.slice(1, -1), ',')
	if (selectors.length === 0 || selectors.some((selector) => selector.trim() === '')) {
	throw new Error(
	`\`@custom-variant ${name} (${selectors.join(',')})\` selector is invalid.`,
	)
	}
	let atRuleParams: string[] = []
	let styleRuleSelectors: string[] = []
	for (let selector of selectors) {
	selector = selector.trim()
	if (selector[0] === '@') {
	atRuleParams.push(selector)
	} else {
	styleRuleSelectors.push(selector)
	}
	}
	customVariants.push((designSystem) => {
	designSystem.variants.static(
	name,
	(r) => {
	let nodes: AstNode[] = []
	if (styleRuleSelectors.length > 0) {
	nodes.push(styleRule(styleRuleSelectors.join(', '), r.nodes))
	}
	for (let selector of atRuleParams) {
	nodes.push(rule(selector, r.nodes))
	}
	r.nodes = nodes
	},
	{
	compounds: compoundsForSelectors([...styleRuleSelectors, ...atRuleParams]),
	},
	)
	})
	return
	}

And I don't see any code path where it removes any variants.

[rozsazoltan]

Yes, I was looking at this too. And in the end, I left it here as an idea, I think it would be great to have a keyword that could globally set the restriction. I also changed the category.

[rozsazoltan]

The question may arise as to why I am using class names with the dark: variant. Well, it's not me using them, but the dependencies, so removing them is impossible. This is why a TailwindCSS configuration-level restriction option would be necessary.

Although the compiled CSS could be processed later with an external tool to remove unnecessary code, why should we struggle with it individually when a restriction could be implemented directly in TailwindCSS?