Skip to content

Commit c970ecc

Browse files
authored
docs(v4): add JSDoc for plugin options (#81)
## Summary - Add JSDoc to `PluginTailwindCSSOptions.config` - Add JSDoc to `PluginTailwindCSSOptions.theme` - Include usage examples for custom config and theme paths ## Motivation Clarify how the plugin resolves Tailwind config and theme modules and show common override patterns, making these options easier to discover and use.
1 parent e77f9f3 commit c970ecc

1 file changed

Lines changed: 100 additions & 0 deletions

File tree

src/index.ts

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,108 @@ const VIRTUAL_UTILITIES_ID = '/virtual-tailwindcss/utilities.css';
1010
const VIRTUAL_GLOBAL_ID = '/virtual-tailwindcss/global.css';
1111

1212
export interface PluginTailwindCSSOptions {
13+
/**
14+
* The path to the Tailwind CSS configuration file.
15+
*
16+
* @remarks
17+
* If a relative path is provided, it is resolved from the rsbuild root
18+
* (`api.context.rootPath`). When omitted, the plugin will look for
19+
* `tailwind.config.js` in the project root. If the file does not exist,
20+
* Tailwind will run with its default configuration.
21+
*
22+
* @example
23+
*
24+
* Use a config file in a custom folder:
25+
*
26+
* ```js
27+
* // rsbuild.config.ts
28+
* import { pluginTailwindCSS } from 'rsbuild-plugin-tailwindcss'
29+
*
30+
* export default {
31+
* plugins: [
32+
* pluginTailwindCSS({
33+
* config: './config/tailwind.config.js',
34+
* }),
35+
* ],
36+
* }
37+
* ```
38+
*
39+
* @example
40+
*
41+
* Use an absolute config path:
42+
*
43+
* ```js
44+
* // rsbuild.config.ts
45+
* import path from 'node:path'
46+
* import { fileURLToPath } from 'node:url'
47+
* import { pluginTailwindCSS } from 'rsbuild-plugin-tailwindcss'
48+
*
49+
* const __dirname = path.dirname(fileURLToPath(import.meta.url))
50+
*
51+
* export default {
52+
* plugins: [
53+
* pluginTailwindCSS({
54+
* config: path.resolve(__dirname, './tailwind.config.js'),
55+
* }),
56+
* ],
57+
* }
58+
* ```
59+
*/
1360
config?: string;
1461

62+
/**
63+
* The path to the Tailwind CSS theme entry module.
64+
*
65+
* @remarks
66+
* By default this is resolved via `require.resolve('tailwindcss/theme')`.
67+
* Override this option when you want to load the theme layer from a custom
68+
* package or a dedicated `@theme` CSS file instead of the default Tailwind
69+
* theme.
70+
*
71+
* The value can be a module id that Node.js can resolve or an absolute file
72+
* path.
73+
*
74+
* @example
75+
*
76+
* Use a custom `@theme` CSS file:
77+
*
78+
* ```js
79+
* // rsbuild.config.ts
80+
* import path from 'node:path'
81+
* import { fileURLToPath } from 'node:url'
82+
* import { pluginTailwindCSS } from 'rsbuild-plugin-tailwindcss'
83+
*
84+
* const __dirname = path.dirname(fileURLToPath(import.meta.url))
85+
*
86+
* export default {
87+
* plugins: [
88+
* pluginTailwindCSS({
89+
* theme: path.resolve(__dirname, './config/custom-theme.css'),
90+
* }),
91+
* ],
92+
* }
93+
* ```
94+
*
95+
* @example
96+
*
97+
* Use a shared theme package (ES module config):
98+
*
99+
* ```js
100+
* // rsbuild.config.ts
101+
* import { createRequire } from 'node:module'
102+
* import { pluginTailwindCSS } from 'rsbuild-plugin-tailwindcss'
103+
*
104+
* const require = createRequire(import.meta.url)
105+
*
106+
* export default {
107+
* plugins: [
108+
* pluginTailwindCSS({
109+
* theme: require.resolve('@acme/tailwind-theme'),
110+
* }),
111+
* ],
112+
* }
113+
* ```
114+
*/
15115
theme?: string;
16116
}
17117

0 commit comments

Comments
 (0)