feat: follow the community agreement and explicitly use tailwindcss (#30)

Author: xiaohuoni

.changeset/cool-laws-walk.md

@@ -0,0 +1,5 @@
+---
+'@umijs/tnf': patch
+---
+
+feat: Follow the community agreement and explicitly use tailwindcss

README.md

@@ -59,6 +59,7 @@ Config is loaded from `.tnfrc.ts` by default.
 - `externals: Record<string, string>`: An object that maps package names to their corresponding paths.
 - `less: { modifyVars?: Record<string, string>; globalVars?: Record<string, string>; math?: 'always' | 'strict' | 'parens-division' | 'parens' | 'strict-legacy' | number; sourceMap?: any; plugins?: (string | [string, Record<string, any>])[];}`: The configuration passed to lessLoader.
 - `router: { defaultPreload?: 'intent' | 'render' | 'viewport'; defaultPreloadDelay?: number; devtool?: { options?: { initialIsOpen?: boolean; position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' }; } | false }`: The router configuration.
+- `tailwindcss: boolean`: Turn on/off tailwindcss. Need to be used in conjunction with `src/tailwind.css` and `tailwind.config.js`.
 
 ## FAQ
 

examples/tailwindcss/.tnfrc.ts

@@ -2,5 +2,5 @@ export default {
   router: {
     defaultPreload: 'intent',
   },
-  tailwindcss: {},
+  tailwindcss: true,
 };

examples/tailwindcss/src/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

examples/tailwindcss/tailwind.config.js

@@ -0,0 +1,6 @@
+export default {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx}",
+    "./src/components/**/*.{js,ts,jsx,tsx}"
+  ]
+}

src/config.ts

@@ -47,85 +47,7 @@ const ConfigSchema = z.object({
         .optional(),
     })
     .optional(),
-  tailwindcss: z
-    .union([
-      z.object({
-        content: z
-          .union([
-            z.array(
-              z.union([
-                z.string(),
-                z.object({
-                  raw: z.string(),
-                  extension: z.string().optional(),
-                }),
-              ]),
-            ),
-            z.object({
-              files: z.array(
-                z.union([
-                  z.string(),
-                  z.object({
-                    raw: z.string(),
-                    extension: z.string().optional(),
-                  }),
-                ]),
-              ),
-              relative: z.boolean().optional(),
-              extract: z
-                .union([
-                  z.function().args(z.string()).returns(z.array(z.string())),
-                  z.record(
-                    z.string(),
-                    z.function().args(z.string()).returns(z.array(z.string())),
-                  ),
-                ])
-                .optional(),
-              transform: z
-                .union([
-                  z.function().args(z.string()).returns(z.string()),
-                  z.record(
-                    z.string(),
-                    z.function().args(z.string()).returns(z.string()),
-                  ),
-                ])
-                .optional(),
-            }),
-          ])
-          .optional(),
-        important: z.union([z.boolean(), z.string()]).optional(),
-        prefix: z.string().optional(),
-        separator: z.string().optional(),
-        safelist: z
-          .array(
-            z.union([
-              z.string(),
-              z.object({
-                pattern: z.instanceof(RegExp),
-                variants: z.array(z.string()).optional(),
-              }),
-            ]),
-          )
-          .optional(),
-        darkMode: z
-          .union([
-            z.literal('media'),
-            z.literal('class'),
-            z.tuple([z.literal('class'), z.string()]),
-            z.literal('selector'),
-            z.tuple([z.literal('selector'), z.string()]),
-            z.tuple([
-              z.literal('variant'),
-              z.union([z.string(), z.array(z.string())]),
-            ]),
-          ])
-          .optional(),
-        theme: z.record(z.string(), z.any()).optional(),
-        plugins: z.array(z.function()).optional(),
-      }),
-      z.record(z.string(), z.any()),
-    ])
-    .optional(),
+  tailwindcss: z.boolean().optional(),
 });
 
 export type Config = z.infer<typeof ConfigSchema>;

src/fishkit/tailwindcss.ts

@@ -22,7 +22,6 @@ interface TailwindConfig {
 interface GenerateTailwindcssOpts {
   cwd: string;
   tmpPath: string;
-  config: Config['tailwindcss'];
   mode: 'development' | 'production';
 }
 
@@ -69,44 +68,29 @@ function getTailwindBinPath(opts: { cwd: string }): string {
 export async function generateTailwindcss(
   opts: GenerateTailwindcssOpts,
 ): Promise<string> {
-  const { cwd, tmpPath, config, mode } = opts;
+  const { cwd, tmpPath, mode } = opts;
   const rootPath = path.join(tmpPath, 'tailwindcss');
 
   // 设置文件路径
   const paths = {
-    input: path.join(rootPath, 'tailwindDirectives.css'),
+    input: path.join(cwd, 'src/tailwind.css'),
     output: path.join(rootPath, 'tailwind.css'),
-    config: path.join(rootPath, 'tailwind.config.js'),
+    config: path.join(cwd, 'tailwind.config.js'),
   };
 
-  // 默认 Tailwind 配置
-  const defaultConfig: TailwindConfig = {
-    content: [
-      './src/pages/**/*.{js,ts,jsx,tsx}',
-      './src/components/**/*.{js,ts,jsx,tsx}',
-    ],
-  };
-
-  const mergedConfig = { ...defaultConfig, ...config };
-
-  // 确保目录存在
-  fs.mkdirpSync(path.dirname(paths.input));
-
-  // 写入 Tailwind 指令文件
-  fs.writeFileSync(
-    paths.input,
-    `
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-    `.trim(),
-  );
+  if (!fs.existsSync(paths.input)) {
+    console.log(
+      'Enabling feature tailwindcss requires input file src/tailwind.css',
+    );
+    return '';
+  }
 
-  // 写入配置文件
-  fs.writeFileSync(
-    paths.config,
-    `export default ${JSON.stringify(mergedConfig, null, 2)}`,
-  );
+  if (!fs.existsSync(paths.config)) {
+    console.log(
+      'Enabling feature tailwindcss requires config file tailwind.config.js',
+    );
+    return '';
+  }
 
   // 生成 CSS 文件
   await generateFile({

src/sync.ts

@@ -65,7 +65,6 @@ export async function sync(opts: SyncOptions) {
     tailwindcssPath = await generateTailwindcss({
       cwd,
       tmpPath,
-      config: config?.tailwindcss,
       mode,
     });
   }