Add support for important: true

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

@@ -7,9 +7,9 @@ import { toKeyPath } from '../utils/to-key-path'
 import { applyConfigToTheme } from './apply-config-to-theme'
 import { createCompatConfig } from './config/create-compat-config'
 import { resolveConfig } from './config/resolve-config'
-import type { UserConfig } from './config/types'
+import type { ResolvedConfig, UserConfig } from './config/types'
 import { darkModePlugin } from './dark-mode'
-import { wrapInImportantSelector } from './important'
+import { applyImportantToDeclarations, wrapInImportantSelector } from './important'
 import { buildPluginApi, type CssPluginOptions, type Plugin } from './plugin-api'
 import { registerThemeVariantOverrides } from './theme-variants'
 
@@ -176,6 +176,9 @@ export async function applyCompatibilityHooks({
     { config: { plugins: [darkModePlugin] } },
   ])
 
+  // @ts-ignore
+  designSystem.compat = { resolvedConfig }
+
   let pluginApi = buildPluginApi(designSystem, ast, resolvedConfig)
 
   for (let { handler } of resolvedConfig.plugins) {
@@ -225,6 +228,20 @@ export async function applyCompatibilityHooks({
   }
 }
 
+export function applyCompatibilityAst({
+  ast,
+  designSystem,
+}: {
+  ast: AstNode[]
+  designSystem: DesignSystem
+}) {
+  // @ts-ignore
+  let resolvedConfig = designSystem.compat?.resolvedConfig as ResolvedConfig
+  if (!resolvedConfig) return
+
+  applyImportantToDeclarations(ast, resolvedConfig)
+}
+
 function toThemeKey(keypath: string[]) {
   return (
     keypath

packages/tailwindcss/src/compat/config.test.ts

@@ -1098,3 +1098,35 @@ test('important: `#app`', async () => {
     "
   `)
 })
+
+test('important: true', async () => {
+  let input = css`
+    @tailwind utilities;
+    @config "./config.js";
+
+    @utility custom {
+      color: red;
+    }
+  `
+
+  let compiler = await compile(input, {
+    loadConfig: async () => ({
+      important: true,
+    }),
+  })
+
+  expect(compiler.build(['underline', 'hover:line-through', 'custom'])).toMatchInlineSnapshot(`
+    ".custom {
+      color: red!important;
+    }
+    .underline {
+      text-decoration-line: underline!important;
+    }
+    .hover\\:line-through {
+      &:hover {
+        text-decoration-line: line-through!important;
+      }
+    }
+    "
+  `)
+})

packages/tailwindcss/src/compat/important.ts

@@ -16,3 +16,15 @@ export function wrapInImportantSelector(ast: AstNode[], resolvedConfig: Resolved
     return WalkAction.Stop
   })
 }
+
+export function applyImportantToDeclarations(ast: AstNode[], resolvedConfig: ResolvedConfig) {
+  if (resolvedConfig.important !== true) return
+
+  walk(ast, (node) => {
+    // Don't mark utility rules as important when inside `@keyframes`
+    if (node.kind === 'rule' && node.selector.startsWith('@keyframes')) return WalkAction.Skip
+    if (node.kind !== 'declaration') return
+
+    node.important = true
+  })
+}

packages/tailwindcss/src/index.ts

@@ -1,7 +1,7 @@
 import { version } from '../package.json'
 import { substituteAtApply } from './apply'
 import { comment, decl, rule, toCss, walk, WalkAction, type Rule } from './ast'
-import { applyCompatibilityHooks } from './compat/apply-compat-hooks'
+import { applyCompatibilityAst, applyCompatibilityHooks } from './compat/apply-compat-hooks'
 import type { UserConfig } from './compat/config/types'
 import { type Plugin } from './compat/plugin-api'
 import { compileCandidates } from './compile'
@@ -385,6 +385,8 @@ export async function compile(
           return compiledCss
         }
 
+        applyCompatibilityAst({ designSystem, ast: newNodes })
+
         previousAstNodeCount = newNodes.length
 
         tailwindUtilitiesNode.nodes = newNodes