Allow marking utility declarations as !important

packages/tailwindcss/src/compile.ts

@@ -135,7 +135,7 @@ export function compileAstNodes(candidate: Candidate, designSystem: DesignSystem
   for (let nodes of asts) {
     let propertySort = getPropertySort(nodes)
 
-    if (candidate.important) {
+    if (candidate.important || designSystem.important === true) {
       applyImportant(nodes)
     }
 

packages/tailwindcss/src/design-system.ts

@@ -49,6 +49,7 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
 
     // How to mark important utilities
     // - wrap with a selector (any string)
+    // - add an !important (true)
     // - do nothing (false)
     important: false,
 

packages/tailwindcss/src/important.test.ts

@@ -34,3 +34,31 @@ test('Utilities can be wrapped in a selector', async () => {
     "
   `)
 })
+
+test('Utilities can be marked with important', async () => {
+  // This is the v4 equivalent of `important: true` from v3
+  let input = css`
+    @import 'tailwindcss/utilities' important;
+  `
+
+  let compiler = await compile(input, {
+    loadStylesheet: async (id: string, base: string) => ({
+      base,
+      content: '@tailwind utilities;',
+    }),
+  })
+
+  expect(compiler.build(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
+    ".underline {
+      text-decoration-line: underline!important;
+    }
+    .hover\\:line-through {
+      &:hover {
+        @media (hover: hover) {
+          text-decoration-line: line-through!important;
+        }
+      }
+    }
+    "
+  `)
+})

packages/tailwindcss/src/index.ts

@@ -247,6 +247,18 @@ async function parseCss(
       return WalkAction.Skip
     }
 
+    // Drop instances of `@media important`
+    //
+    // We support `@import "tailwindcss" important` to mark all declarations
+    // in generated utilities as `!important`.
+    if (node.selector.startsWith('@media important')) {
+      important = true
+
+      replaceWith(node.nodes)
+
+      return WalkAction.Skip
+    }
+
     if (node.selector !== '@theme' && !node.selector.startsWith('@theme ')) return
 
     let [themeOptions, themePrefix] = parseThemeOptions(node.selector)

packages/tailwindcss/src/intellisense.test.ts

@@ -120,3 +120,33 @@ test('Utilities show when nested in a selector in intellisense', async () => {
     ]
   `)
 })
+
+test('Utilities, when marked as important, show as important in intellisense', async () => {
+  let input = css`
+    @import 'tailwindcss/utilities' important;
+  `
+
+  let design = await __unstable__loadDesignSystem(input, {
+    loadStylesheet: async (_, base) => ({
+      base,
+      content: '@tailwind utilities;',
+    }),
+  })
+
+  expect(design.candidatesToCss(['underline', 'hover:line-through'])).toMatchInlineSnapshot(`
+    [
+      ".underline {
+      text-decoration-line: underline!important;
+    }
+    ",
+      ".hover\\:line-through {
+      &:hover {
+        @media (hover: hover) {
+          text-decoration-line: line-through!important;
+        }
+      }
+    }
+    ",
+    ]
+  `)
+})