diff --git a/README.md b/README.md index b5f154d..cbc82e9 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,20 @@ As of v0.5.x, this plugin now requires Prettier v3 and is ESM-only. This means i ## Options -### Customizing your Tailwind config path +### Specifying your Tailwind stylesheet path + +When using Tailwind CSS v4 you must specify your CSS file entry point, which includes your theme, custom utilities, and other Tailwind configuration options. To do this, use the `tailwindStylesheet` option in your Prettier configuration. + +Note that paths are resolved relative to the Prettier configuration file. + +```json5 +// .prettierrc +{ + "tailwindStylesheet": "./resources/css/app.css" +} +``` + +### Specifying your Tailwind JavaScript config path To ensure that the class sorting takes into consideration any of your project's Tailwind customizations, it needs access to your [Tailwind configuration file](https://tailwindcss.com/docs/configuration) (`tailwind.config.js`). diff --git a/src/config.ts b/src/config.ts index c9aa609..8a02126 100644 --- a/src/config.ts +++ b/src/config.ts @@ -28,7 +28,12 @@ let prettierConfigCache = expiringMap(10_000) export async function getTailwindConfig( options: ParserOptions, ): Promise { - let key = `${options.filepath}:${options.tailwindConfig ?? ''}:${options.tailwindEntryPoint ?? ''}` + let key = [ + options.filepath, + options.tailwindStylesheet ?? '', + options.tailwindEntryPoint ?? '', + options.tailwindConfig ?? '', + ].join(':') let baseDir = await getBaseDir(options) // Map the source file to it's associated Tailwind config file @@ -292,6 +297,10 @@ async function loadV4( function getConfigPath(options: ParserOptions, baseDir: string): string | null { if (options.tailwindConfig) { + if (options.tailwindConfig.endsWith('.css')) { + return null + } + return path.resolve(baseDir, options.tailwindConfig) } @@ -321,9 +330,25 @@ function getConfigPath(options: ParserOptions, baseDir: string): string | null { } function getEntryPoint(options: ParserOptions, baseDir: string): string | null { + if (options.tailwindStylesheet) { + return path.resolve(baseDir, options.tailwindStylesheet) + } + if (options.tailwindEntryPoint) { + console.warn( + 'Use the `tailwindStylesheet` option for v4 projects instead of `tailwindEntryPoint`.', + ) + return path.resolve(baseDir, options.tailwindEntryPoint) } + if (options.tailwindConfig && options.tailwindConfig.endsWith('.css')) { + console.warn( + 'Use the `tailwindStylesheet` option for v4 projects instead of `tailwindConfig`.', + ) + + return path.resolve(baseDir, options.tailwindConfig) + } + return null } diff --git a/src/index.ts b/src/index.ts index 25f76bc..009a058 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1197,7 +1197,14 @@ export interface PluginOptions { tailwindConfig?: string /** - * Path to the Tailwind entry point (v4+) + * Path to the CSS stylesheet used by Tailwind CSS (v4+) + */ + tailwindStylesheet?: string + + /** + * Path to the CSS stylesheet used by Tailwind CSS (v4+) + * + * @deprecated Use `tailwindStylesheet` instead */ tailwindEntryPoint?: string diff --git a/src/options.ts b/src/options.ts index 94eed55..7e11ccb 100644 --- a/src/options.ts +++ b/src/options.ts @@ -13,6 +13,15 @@ export const options: Record = { type: 'string', category: 'Tailwind CSS', description: 'Path to the CSS entrypoint in your Tailwind project (v4+)', + + // Can't include this otherwise the option is not passed to parsers + // deprecated: "This option is deprecated. Use 'tailwindStylesheet' instead.", + }, + + tailwindStylesheet: { + type: 'string', + category: 'Tailwind CSS', + description: 'Path to the CSS stylesheet in your Tailwind project (v4+)', }, tailwindAttributes: { diff --git a/tests/fixtures/v4/basic/package-lock.json b/tests/fixtures/v4/basic/package-lock.json index 04abdf8..9c8e2d7 100644 --- a/tests/fixtures/v4/basic/package-lock.json +++ b/tests/fixtures/v4/basic/package-lock.json @@ -5,13 +5,13 @@ "packages": { "": { "dependencies": { - "tailwindcss": "^4.0.0-alpha.23" + "tailwindcss": "^4.0.0-alpha.34" } }, "node_modules/tailwindcss": { - "version": "4.0.0-alpha.23", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-alpha.23.tgz", - "integrity": "sha512-5dy4L1icQUYkG2Fa427QG3fKGkNqMi6V4bJE0DoxBZkR4e550w7uxYJ7vBXINWrRmDd4LHmQInkgsHza3lwONg==" + "version": "4.0.0-alpha.34", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-alpha.34.tgz", + "integrity": "sha512-SST1h774z+bVCLTpRz4TYpjJLIcomZH1HBF4OPY1YusONUYqg0/XTq0N++12mNeyu6mK7VbFIkkNtf636yudWQ==" } } } diff --git a/tests/fixtures/v4/basic/package.json b/tests/fixtures/v4/basic/package.json index 7f5a61c..9c56072 100644 --- a/tests/fixtures/v4/basic/package.json +++ b/tests/fixtures/v4/basic/package.json @@ -1,8 +1,8 @@ { "dependencies": { - "tailwindcss": "^4.0.0-alpha.23" + "tailwindcss": "^4.0.0-alpha.34" }, "prettier": { - "tailwindEntryPoint": "./app.css" + "tailwindStylesheet": "./app.css" } } diff --git a/tests/fixtures/v4/configs/package-lock.json b/tests/fixtures/v4/configs/package-lock.json index fbba9f0..d71d14b 100644 --- a/tests/fixtures/v4/configs/package-lock.json +++ b/tests/fixtures/v4/configs/package-lock.json @@ -5,13 +5,13 @@ "packages": { "": { "dependencies": { - "tailwindcss": "^4.0.0-alpha.23" + "tailwindcss": "^4.0.0-alpha.34" } }, "node_modules/tailwindcss": { - "version": "4.0.0-alpha.23", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-alpha.23.tgz", - "integrity": "sha512-5dy4L1icQUYkG2Fa427QG3fKGkNqMi6V4bJE0DoxBZkR4e550w7uxYJ7vBXINWrRmDd4LHmQInkgsHza3lwONg==" + "version": "4.0.0-alpha.34", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-alpha.34.tgz", + "integrity": "sha512-SST1h774z+bVCLTpRz4TYpjJLIcomZH1HBF4OPY1YusONUYqg0/XTq0N++12mNeyu6mK7VbFIkkNtf636yudWQ==" } } } diff --git a/tests/fixtures/v4/configs/package.json b/tests/fixtures/v4/configs/package.json index 7f5a61c..9c56072 100644 --- a/tests/fixtures/v4/configs/package.json +++ b/tests/fixtures/v4/configs/package.json @@ -1,8 +1,8 @@ { "dependencies": { - "tailwindcss": "^4.0.0-alpha.23" + "tailwindcss": "^4.0.0-alpha.34" }, "prettier": { - "tailwindEntryPoint": "./app.css" + "tailwindStylesheet": "./app.css" } }