Introduce tailwindStylesheet option to replace tailwindEntryPoint (#330)

* Refactor

* Introduce `tailwindStylesheet` option to replace `tailwindEntryPoint`

The old option will still work but the new one is much better named

* Allow `tailwindConfig` to be used as a stylesheet option

This is a compatability feature. People previously used the `tailwindConfig` option to specify the location of their config and naturally expect it to work with a CSS file in v4. The preferred option is `tailwindStylesheet` but making this work is rather simple so it should “just work” for improved DX

* Warn when using outdated config options

* Update readme

* Bump Tailwind version in tests

* Update option in tests

* Update README.md

Co-authored-by: Jonathan Reinink <[email protected]>

* Update README.md

Co-authored-by: Jonathan Reinink <[email protected]>

* Update README.md

Co-authored-by: Jonathan Reinink <[email protected]>

* Tweak title

---------

Co-authored-by: Jonathan Reinink <[email protected]>

Author: thecrypticace

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`).
 

src/config.ts

@@ -28,7 +28,12 @@ let prettierConfigCache = expiringMap<string, string | null>(10_000)
 export async function getTailwindConfig(
   options: ParserOptions,
 ): Promise<ContextContainer> {
-  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
 }

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
 

src/options.ts

@@ -13,6 +13,15 @@ export const options: Record<string, SupportOption> = {
     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: {

tests/fixtures/v4/basic/package-lock.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"
   }
 }

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"
   }
 }