chore: prefer CSS entry directories when resolving Tailwind v4 @config

Author: sonofmagic

.changeset/fix-v4-v4-config-resolution.md

@@ -0,0 +1,5 @@
+---
+"tailwindcss-patch": patch
+---
+
+Prefer CSS entry directories when resolving Tailwind v4 `@config` so relative configs are found even when a base directory is provided.

packages/tailwindcss-patch/src/extraction/candidate-extractor.ts

@@ -17,9 +17,34 @@ async function importOxide() {
   return import('@tailwindcss/oxide')
 }
 
+async function loadDesignSystem(css: string, bases: string[]) {
+  const uniqueBases = Array.from(new Set(bases.filter(Boolean)))
+  if (uniqueBases.length === 0) {
+    throw new Error('No base directories provided for Tailwind CSS design system.')
+  }
+
+  const { __unstable__loadDesignSystem } = await importNode()
+  let lastError: unknown
+
+  for (const base of uniqueBases) {
+    try {
+      return await __unstable__loadDesignSystem(css, { base })
+    }
+    catch (error) {
+      lastError = error
+    }
+  }
+
+  if (lastError instanceof Error) {
+    throw lastError
+  }
+  throw new Error('Failed to load Tailwind CSS design system.')
+}
+
 export interface ExtractValidCandidatesOption {
   sources?: SourceEntry[]
   base?: string
+  baseFallbacks?: string[]
   css?: string
   cwd?: string
 }
@@ -55,6 +80,7 @@ export async function extractValidCandidates(options?: ExtractValidCandidatesOpt
   const defaultCwd = providedOptions.cwd ?? process.cwd()
 
   const base = providedOptions.base ?? defaultCwd
+  const baseFallbacks = providedOptions.baseFallbacks ?? []
   const css = providedOptions.css ?? '@import "tailwindcss";'
   const sources = (providedOptions.sources ?? [
     {
@@ -68,8 +94,7 @@ export async function extractValidCandidates(options?: ExtractValidCandidatesOpt
     negated: source.negated,
   }))
 
-  const { __unstable__loadDesignSystem } = await importNode()
-  const designSystem = await __unstable__loadDesignSystem(css, { base })
+  const designSystem = await loadDesignSystem(css, [base, ...baseFallbacks])
 
   const candidates = await extractRawCandidates(sources)
   const parsedCandidates = candidates.filter(

packages/tailwindcss-patch/src/runtime/class-collector.ts

@@ -63,11 +63,15 @@ export async function collectClassesFromTailwindV4(
       }
       const css = await fs.readFile(filePath, 'utf8')
       const entryDir = path.dirname(filePath)
-      const baseForEntry = resolvedConfiguredBase ?? entryDir
-      const sources = resolveSources(baseForEntry)
+      const designSystemBases = resolvedConfiguredBase && resolvedConfiguredBase !== entryDir
+        ? [entryDir, resolvedConfiguredBase]
+        : [entryDir]
+      const sourcesBase = resolvedConfiguredBase ?? entryDir
+      const sources = resolveSources(sourcesBase)
       const candidates = await extractValidCandidates({
         cwd: options.projectRoot,
-        base: baseForEntry,
+        base: designSystemBases[0],
+        baseFallbacks: designSystemBases.slice(1),
         css,
         sources,
       })

packages/tailwindcss-patch/test/api.tailwindcss-patcher.test.ts

@@ -41,6 +41,58 @@ describe('TailwindcssPatcher', () => {
     expect(await fs.pathExists(outputFile)).toBe(true)
   })
 
+  it('resolves @config relative to the CSS entry directory even when base is set', async () => {
+    const workspaceRoot = await fs.mkdtemp(path.join(__dirname, 'tmp-entry-base-'))
+    try {
+      const cssDir = path.join(workspaceRoot, 'src')
+      await fs.ensureDir(cssDir)
+
+      const configPath = path.join(workspaceRoot, 'tailwind.config.js')
+      await fs.writeFile(
+        configPath,
+        [
+          'module.exports = {',
+          '  content: ["./src/**/*.{html,css}"],',
+          '  theme: {},',
+          '};',
+        ].join('\n'),
+        'utf8',
+      )
+
+      const cssEntry = path.join(cssDir, 'app.css')
+      await fs.writeFile(
+        cssEntry,
+        ['@import "tailwindcss";', '@config "../tailwind.config.js";'].join('\n'),
+        'utf8',
+      )
+
+      const usageFile = path.join(cssDir, 'page.html')
+      await fs.writeFile(usageFile, '<div class="px-[48rpx]"></div>', 'utf8')
+
+      const patcher = new TailwindcssPatcher({
+        cwd: workspaceRoot,
+        overwrite: false,
+        cache: false,
+        output: {
+          enabled: false,
+        },
+        tailwind: {
+          version: 4,
+          v4: {
+            base: workspaceRoot,
+            cssEntries: [cssEntry],
+          },
+        },
+      })
+
+      const result = await patcher.extract({ write: false })
+      expect(result.classSet?.has('px-[48rpx]')).toBe(true)
+    }
+    finally {
+      await fs.remove(workspaceRoot)
+    }
+  })
+
   it('falls back to workspace sources when cssEntries directory is empty', async () => {
     const workspaceRoot = await fs.mkdtemp(path.join(__dirname, 'tmp-workspace-'))
     try {