feature flag --value('…') and --modifier('…')

Author: RobinMalfait

CHANGELOG.md

@@ -19,13 +19,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370))
 - _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128))
 - _Experimental_: Add `@source inline(…)` ([#17147](https://github.com/tailwindlabs/tailwindcss/pull/17147))
+- _Experimental_: Add support for literal values in `--value('…')` and `--modifier('…')` ([#17304](https://github.com/tailwindlabs/tailwindcss/pull/17304))
 
 ## [4.0.16] - 2025-03-25
 
-### Added
-
-- Add support for literal values in `--value('…')` and `--modifier('…')` ([#17304](https://github.com/tailwindlabs/tailwindcss/pull/17304))
-
 ### Fixed
 
 - Fix class extraction followed by `(` in Pug ([#17320](https://github.com/tailwindlabs/tailwindcss/pull/17320))

packages/tailwindcss/src/feature-flags.ts

@@ -7,3 +7,4 @@ export const enableScripting = process.env.FEATURES_ENV !== 'stable'
 export const enableSourceInline = process.env.FEATURES_ENV !== 'stable'
 export const enableUserValid = process.env.FEATURES_ENV !== 'stable'
 export const enableWrapAnywhere = process.env.FEATURES_ENV !== 'stable'
+export const enableCssLiterals = process.env.FEATURES_ENV !== 'stable'

packages/tailwindcss/src/utilities.ts

@@ -11,7 +11,12 @@ import {
 } from './ast'
 import type { Candidate, CandidateModifier, NamedUtilityValue } from './candidate'
 import type { DesignSystem } from './design-system'
-import { enableBaselineLast, enableSafeAlignment, enableWrapAnywhere } from './feature-flags'
+import {
+  enableBaselineLast,
+  enableCssLiterals,
+  enableSafeAlignment,
+  enableWrapAnywhere,
+} from './feature-flags'
 import type { Theme, ThemeKey } from './theme'
 import { compareBreakpoints } from './utils/compare-breakpoints'
 import { DefaultMap } from './utils/default-map'
@@ -4835,6 +4840,7 @@ export function createCssUtility(node: AtRule) {
           for (let node of fn.nodes) {
             // Track literal values
             if (
+              enableCssLiterals &&
               node.kind === 'word' &&
               (node.value[0] === '"' || node.value[0] === "'") &&
               node.value[0] === node.value[node.value.length - 1]
@@ -5037,6 +5043,7 @@ function resolveValueFunction(
   for (let arg of fn.nodes) {
     // Resolve literal value, e.g.: `--modifier('closest-side')`
     if (
+      enableCssLiterals &&
       value.kind === 'named' &&
       arg.kind === 'word' &&
       // Should be wreapped in quotes