Proposal forImportant option: ability to pass both True and a Selector Strategy

[clicktodev]

I want both a selector strategy for scoping and the ability to force everything into important to disallow external styles overriding with important.
https://tailwindcss.com/docs/configuration#important
https://tailwindcss.com/docs/configuration#selector-strategy

important: { important: true, selector_strategy: '#embed' }

current behavior (first rule overrides the second):

wanted behavior (first rule doesn't override the second):

found the relevant code for v4

tailwindcss/packages/tailwindcss/src/compat/apply-compat-hooks.ts

Lines 232 to 253 in af15e1b

	// If an important strategy has already been set in CSS don't override it
	if (!designSystem.important && resolvedConfig.important === true) {
	designSystem.important = true
	}
	if (typeof resolvedConfig.important === 'string') {
	let wrappingSelector = resolvedConfig.important
	walk(ast, (node, { replaceWith, parent }) => {
	if (node.kind !== 'rule') return
	if (node.selector !== '@tailwind utilities') return
	// The AST node was already manually wrapped so there's nothing to do
	if (parent?.kind === 'rule' && parent.selector === wrappingSelector) {
	return WalkAction.Stop
	}
	replaceWith(rule(wrappingSelector, [node]))
	return WalkAction.Stop
	})
	}

for v3

tailwindcss/src/lib/generateRules.js

Lines 652 to 678 in 58cc7ed

	function getImportantStrategy(important) {
	if (important === true) {
	return (rule) => {
	if (inKeyframes(rule)) {
	return
	}
	rule.walkDecls((d) => {
	if (d.parent.type === 'rule' && !inKeyframes(d.parent)) {
	d.important = true
	}
	})
	}
	}
	if (typeof important === 'string') {
	return (rule) => {
	if (inKeyframes(rule)) {
	return
	}
	rule.selectors = rule.selectors.map((selector) => {
	return `${important} ${selector}`
	})
	}
	}
	}

note:
if you're asking why not just set important to true and use css nesting for scoping, it's because the postcss nested behavior breaks with escaped characters in the selector postcss/postcss-nested#169

[philipp-spiess]

Hey! You're in luck because we just release Tailwind CSS v4 beta which does support having both a custom prefix and an the important option. You can do this via:

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/preflight" layer(base);

.root {
  @media important {
    @tailwind utilities;
  }
}

Check it out: https://play.tailwindcss.com/trmRxiVfgF?file=css

(The syntax for this is currently borked, ideally the important keyword should also be allowed as part of the @tailwind directive, we'll fix this 😬)

[goldmerc]

@philipp-spiess As far as I can see, this method for scoping tailwind classes is not mentioned in the documentation. Is it considered fully supported? Prefixes are mentioned in the documentation and the upgrade guide. But I prefer scoping for my sanity and it's what I've been doing in v3 using the important config with an ID selector.

I also found this #15866 (comment) which is a similar but not identical approach. It loads the tailwind utilities in the utilities layer.

Which of the two approaches is recommended? Thanks in advance.