WIP

packages/tailwindcss/src/ast.ts

@@ -105,6 +105,13 @@ export function toCss(ast: AstNode[]) {
         return css
       }
 
+      if (node.selector === '@tailwind utilities') {
+        for (let child of node.nodes) {
+          css += stringify(child, depth)
+        }
+        return css
+      }
+
       // Print at-rules without nodes with a `;` instead of an empty block.
       //
       // E.g.:

packages/tailwindcss/src/index.test.ts

@@ -93,9 +93,7 @@ describe('compiling CSS', () => {
 
       .grid {
         display: grid;
-      }
-
-      @tailwind utilities;"
+      }"
     `)
   })
 

packages/tailwindcss/src/index.ts

@@ -103,11 +103,17 @@ export function compile(
 
   let designSystem = buildDesignSystem(theme)
 
+  let tailwindUtilitiesNode: Rule | null = null
+
   // Find `@tailwind utilities` and replace it with the actual generated utility
   // class CSS.
-  walk(ast, (node, { replaceWith }) => {
+  walk(ast, (node) => {
     if (node.kind === 'rule' && node.selector === '@tailwind utilities') {
-      replaceWith(compileCandidates(rawCandidates, designSystem).astNodes)
+      tailwindUtilitiesNode = node
+
+      // Set the `@tailwind utilities` nodes, to the actual generated CSS
+      node.nodes = compileCandidates(rawCandidates, designSystem).astNodes
+
       // Stop walking after finding `@tailwind utilities` to avoid walking all
       // of the generated CSS. This means `@tailwind utilities` can only appear
       // once per file but that's the intended usage at this point in time.
@@ -168,8 +174,19 @@ export function compile(
     })
   }
 
+  // TODO: Don't do this unless rebuilding?
+  let allCandidates = new Set(rawCandidates)
+
   return {
-    rebuild(rawCandidates: string[]) {
+    rebuild(newRawCandidates: string[]) {
+      for (let candidate of newRawCandidates) {
+        allCandidates.add(candidate)
+      }
+
+      if (tailwindUtilitiesNode) {
+        let newNodes = compileCandidates(Array.from(allCandidates), designSystem).astNodes
+        tailwindUtilitiesNode.nodes = newNodes
+      }
       return toCss(ast)
     },
     css: toCss(ast),