Add bundled v4 fallback (#390)

* Add fallback for v4

* Fallback to v4 by default

* Add tests

* Fix testing aginst unminified build

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improved monorepo support by loading Tailwind CSS relative to the input file instead of prettier config file ([#386](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/386))
 - Improved monorepo support by loading v3 configs relative to the input file instead of prettier config file ([#386](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/386))
 - Fix whitespace removal inside nested concat and template expressions ([#396](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/396))
+- Fallback to Tailwind CSS v4 instead of v3 by default ([#390](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/390))
 
 ## [0.6.14] - 2025-07-09
 

build.mjs

@@ -47,11 +47,11 @@ function patchCjsInterop() {
         let code = [
           `import {createRequire as __global__createRequire__} from 'module'`,
           `import {dirname as __global__dirname__} from 'path'`,
-          `import {fileURLToPath} from 'url'`,
+          `import {fileURLToPath as __global__fileURLToPath__} from 'url'`,
 
           // CJS interop fixes
           `const require=__global__createRequire__(import.meta.url)`,
-          `const __filename=fileURLToPath(import.meta.url)`,
+          `const __filename=__global__fileURLToPath__(import.meta.url)`,
           `const __dirname=__global__dirname__(__filename)`,
         ]
 

src/config.ts

@@ -117,14 +117,6 @@ export async function getTailwindConfig(options: ParserOptions): Promise<any> {
     stylesheet ??= `${pkgDir}/theme.css`
   }
 
-  // No stylesheet was given or otherwise found in a local v4 installation
-  // nor was a tailwind config given or found.
-  //
-  // Fallback to v3
-  if (!stylesheet) {
-    return pathToApiMap.remember(null, () => loadV3(null, null))
-  }
-
   return pathToApiMap.remember(`${pkgDir}:${stylesheet}`, () => loadV4(mod, stylesheet))
 }
 

src/versions/assets.ts

@@ -0,0 +1,23 @@
+// @ts-ignore
+import index from 'tailwindcss-v4/index.css'
+// @ts-ignore
+import preflight from 'tailwindcss-v4/preflight.css'
+// @ts-ignore
+import theme from 'tailwindcss-v4/theme.css'
+// @ts-ignore
+import utilities from 'tailwindcss-v4/utilities.css'
+
+export const assets: Record<string, string> = {
+  tailwindcss: index,
+  'tailwindcss/index': index,
+  'tailwindcss/index.css': index,
+
+  'tailwindcss/preflight': preflight,
+  'tailwindcss/preflight.css': preflight,
+
+  'tailwindcss/theme': theme,
+  'tailwindcss/theme.css': theme,
+
+  'tailwindcss/utilities': utilities,
+  'tailwindcss/utilities.css': utilities,
+}

src/versions/v4.ts

@@ -1,10 +1,11 @@
-// @ts-check
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import { pathToFileURL } from 'node:url'
 import { createJiti, type Jiti } from 'jiti'
+import * as v4 from 'tailwindcss-v4'
 import { resolveCssFrom, resolveJsFrom } from '../resolve'
 import type { UnifiedApi } from '../types'
+import { assets } from './assets'
 
 interface DesignSystem {
   getClassOrder(classList: string[]): [string, bigint | null][]
@@ -40,11 +41,10 @@ interface ApiV4 {
 
 export async function loadV4(mod: ApiV4 | null, stylesheet: string | null): Promise<UnifiedApi> {
   // This is not Tailwind v4
+  let isFallback = false
   if (!mod || !mod.__unstable__loadDesignSystem) {
-    throw new Error('Unable to load Tailwind CSS v4: Your installation of Tailwind CSS is not v4')
-
-    // TODO
-    // mod = (await import('tailwindcss-v4')) as ApiV4
+    mod = v4 as ApiV4
+    isFallback = true
   }
 
   // Create a Jiti instance that can be used to load plugins and config files
@@ -63,9 +63,7 @@ export async function loadV4(mod: ApiV4 | null, stylesheet: string | null): Prom
   } else {
     importBasePath = process.cwd()
     stylesheet = path.join(importBasePath, 'fake.css')
-
-    // TODO: bundled theme.css file?
-    css = ''
+    css = assets['tailwindcss/theme.css']
   }
 
   // Load the design system and set up a compatible context object that is
@@ -90,11 +88,19 @@ export async function loadV4(mod: ApiV4 | null, stylesheet: string | null): Prom
     }),
 
     loadStylesheet: async (id: string, base: string) => {
-      let resolved = resolveCssFrom(base, id)
+      try {
+        let resolved = resolveCssFrom(base, id)
+
+        return {
+          base: path.dirname(resolved),
+          content: await fs.readFile(resolved, 'utf-8'),
+        }
+      } catch (err) {
+        if (isFallback && id in assets) {
+          return { base, content: assets[id] }
+        }
 
-      return {
-        base: path.dirname(resolved),
-        content: await fs.readFile(resolved, 'utf-8'),
+        throw err
       }
     },
 

tests/fixtures.test.ts

@@ -16,6 +16,16 @@ let fixtures = [
     dir: 'no-prettier-config',
     ext: 'html',
   },
+  {
+    name: 'no local install of Tailwind CSS (uses v4)',
+    dir: 'no-local-version',
+    ext: 'html',
+  },
+  {
+    name: 'no stylesheet given (uses v4)',
+    dir: 'no-stylesheet-given',
+    ext: 'html',
+  },
   {
     name: 'inferred config path',
     dir: 'basic',

tests/fixtures/no-local-version/app.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+@theme {
+  --color-tomato: tomato;
+}

tests/fixtures/no-local-version/index.html

@@ -0,0 +1 @@
+<div class="sm:bg-tomato bg-red-500"></div>

tests/fixtures/no-local-version/output.html

@@ -0,0 +1 @@
+<div class="bg-red-500 sm:bg-tomato"></div>