feat: support tailwindcssPath option to specify the tailwindcss (#56)

In some cases such as in monorepo, the `tailwindcss` isn't installed in
current root path or can't be resolved correctly. Plugin need to provide
a option to specify the path of `tailwindcss`.

Author: luhc228

src/TailwindCSSRspackPlugin.ts

@@ -144,6 +144,33 @@ interface TailwindRspackPluginOptions {
     PostCSSLoaderOptions['postcssOptions'],
     (loaderContext: Rspack.LoaderContext) => void
   >;
+
+  /**
+   * Specifies the absolute path to the tailwindcss package.
+   *
+   * By default, tailwindcss is resolved using Node.js module resolution algorithm
+   * starting from the project's root directory. This option allows explicit
+   * specification of the tailwindcss location for scenarios where automatic
+   * resolution fails or the resolved path is not correct, such as in monorepo.
+   *
+   * ```js
+   * // rspack.config.js
+   * import { TailwindRspackPlugin } from 'rsbuild-plugin-tailwindcss'
+   *
+   * export default {
+   *   plugins: [
+   *     new TailwindRspackPlugin({
+   *       postcssOptions: {
+   *         plugins: {
+   *           tailwindcssPath: require.resolve('tailwindcss'),
+   *         },
+   *       },
+   *     }),
+   *   ],
+   * }
+   * ```
+   */
+  tailwindcssPath?: string | undefined;
 }
 
 // From `@rollup/pluginutils`
@@ -244,14 +271,17 @@ class TailwindRspackPluginImpl {
                   return;
                 }
               }
-
               const [
                 { default: postcss },
                 { default: tailwindcss },
                 configPath,
               ] = await Promise.all([
                 import('postcss'),
-                import('tailwindcss'),
+                import(
+                  typeof this.options.tailwindcssPath === 'string'
+                    ? `${pathToFileURL(this.options.tailwindcssPath)}`
+                    : 'tailwindcss'
+                ),
                 this.#prepareTailwindConfig(
                   entryName,
                   Array.from(entryModules).filter(filter),
@@ -335,6 +365,7 @@ class TailwindRspackPluginImpl {
     const [configName, configContent] = await this.#generateTailwindConfig(
       userConfig,
       entryModules,
+      this.options.tailwindcssPath,
     );
     const configPath = path.resolve(outputDir, configName);
 
@@ -343,10 +374,12 @@ class TailwindRspackPluginImpl {
     return configPath;
   }
 
-  async #resolveTailwindCSSVersion(): Promise<string> {
+  async #resolveTailwindCSSVersion(
+    tailwindcssPath: string | undefined,
+  ): Promise<string> {
     const require = createRequire(import.meta.url);
     const pkgPath = require.resolve('tailwindcss/package.json', {
-      paths: [this.compiler.context],
+      paths: [tailwindcssPath ? path.dirname(tailwindcssPath) : this.compiler.context],
     });
 
     const content = await readFile(pkgPath, 'utf-8');
@@ -359,8 +392,9 @@ class TailwindRspackPluginImpl {
   async #generateTailwindConfig(
     userConfig: string,
     entryModules: string[],
+    tailwindcssPath: string | undefined,
   ): Promise<['tailwind.config.mjs' | 'tailwind.config.cjs', string]> {
-    const version = await this.#resolveTailwindCSSVersion();
+    const version = await this.#resolveTailwindCSSVersion(tailwindcssPath);
 
     const { default: satisfies } = await import(
       'semver/functions/satisfies.js'

src/index.ts

@@ -112,6 +112,33 @@ export interface PluginTailwindCSSOptions {
    * ```
    */
   include?: FilterPattern | undefined;
+
+  /**
+   * Specifies the absolute path to the tailwindcss package.
+   *
+   * By default, tailwindcss is resolved using Node.js module resolution algorithm
+   * starting from the project's root directory. This option allows explicit
+   * specification of the tailwindcss location for scenarios where automatic
+   * resolution fails or the resolved path is not correct, such as in monorepo.
+   *
+   * ```js
+   * // rspack.config.js
+   * import { TailwindRspackPlugin } from 'rsbuild-plugin-tailwindcss'
+   *
+   * export default {
+   *   plugins: [
+   *     new TailwindRspackPlugin({
+   *       postcssOptions: {
+   *         plugins: {
+   *           tailwindcssPath: require.resolve('tailwindcss'),
+   *         },
+   *       },
+   *     }),
+   *   ],
+   * }
+   * ```
+   */
+  tailwindcssPath?: string;
 }
 
 export const pluginTailwindCSS = (
@@ -161,6 +188,7 @@ export const pluginTailwindCSS = (
             include: options.include,
             exclude: options.exclude,
             postcssOptions,
+            tailwindcssPath: options.tailwindcssPath,
           },
         ]);
       },

test/config/index.test.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
 import { expect, test } from '@playwright/test';
 import { createRsbuild } from '@rsbuild/core';
 import { pluginTailwindCSS } from '../../src';
-import { supportESM, getRandomPort } from '../helper';
+import { getRandomPort, supportESM } from '../helper';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 

test/resolve-tailwindcss/index.test.ts

@@ -0,0 +1,44 @@
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { expect, test } from '@playwright/test';
+import { createRsbuild } from '@rsbuild/core';
+import { pluginTailwindCSS } from '../../src';
+import { getRandomPort } from '../helper';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+
+test('should resolve tailwindcss', async ({ page }) => {
+  const rsbuild = await createRsbuild({
+    cwd: __dirname,
+    rsbuildConfig: {
+      plugins: [
+        pluginTailwindCSS({
+          tailwindcssPath: require.resolve('tailwindcss'),
+        }),
+      ],
+      server: {
+        port: getRandomPort(),
+      },
+    },
+  });
+
+  const { server, urls } = await rsbuild.startDevServer();
+
+  await page.goto(urls[0]);
+
+  const display = await page.evaluate(() => {
+    const el = document.getElementById('test');
+
+    if (!el) {
+      throw new Error('#test not found');
+    }
+
+    return window.getComputedStyle(el).getPropertyValue('margin');
+  });
+
+  expect(display).toBe('0px');
+
+  await server.close();
+});

test/resolve-tailwindcss/src/index.js

@@ -0,0 +1,11 @@
+import 'tailwindcss/utilities.css';
+
+function className() {
+  return 'm-0';
+}
+
+const root = document.getElementById('root');
+const element = document.createElement('div');
+element.id = 'test';
+element.className = className();
+root.appendChild(element);