feat: 使用最新版tailwindcss

README.CN.md

@@ -1,6 +1,6 @@
 # umi-plugin-tailwindcss
 
-> umi-plugin-tailwindcss
+> umi-plugin-tailwindcss，仅对 3.x 有效。umi4 内置支持 tailwind 了，新项目已经不需要此插件了 [umi4 tailwind-css 文档](https://umijs.org/docs/guides/generator#tailwind-css-%E9%85%8D%E7%BD%AE%E7%94%9F%E6%88%90%E5%99%A8)
 
 ## 安装
 
@@ -37,7 +37,9 @@ tailwindcss: {
 
 此插件会自动完成引入`tailwind`[所需做的事情](https://tailwindcss.com/docs/installation)。
 
-1. 自动添加`tailwindcss`依赖（默认安装的是最新版本的[@tailwindcss/postcss7-compat](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build)，因为目前 umi 不支持 postcss8）。
+1. 自动添加`tailwindcss`依赖。
+   对于 4.x 版本: 默认安装最新版本 tailwindcss
+   对于 3.x 版本: 默认安装的是最新版本的[@tailwindcss/postcss7-compat](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build)，因为目前 umi 不支持 postcss8）。
 
    你也可以安装指定的 tailwindcss 版本，插件会优先使用`devDependencies`里面的`tailwindcss`包，如果不存在，会使用`@tailwindcss/postcss7-compat`。
 

README.md

@@ -1,6 +1,6 @@
 # umi-plugin-tailwindcss
 
-> umi-plugin-tailwindcss
+> This plugin is only valid for umijs 3.x，Umi4 has built-in support for Tailwindcss and is no longer needed for new projects. [umi4 tailwind-css doc](https://umijs.org/docs/guides/generator#tailwind-css-%E9%85%8D%E7%BD%AE%E7%94%9F%E6%88%90%E5%99%A8)
 
 [中文文档](https://github.com/dewfall123/umi-plugin-tailwindcss/blob/master/README.CN.md)
 
@@ -39,7 +39,9 @@ tailwindcss: {
 
 This plugin do the [following things](https://tailwindcss.com/docs/installation) to support tailwind in umi。
 
-1. Add `tailwindcss` dependencies auto（defauts to the latest version[@tailwindcss/postcss7-compat](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build), because of umi doesn't support postcss8 now）。
+1. Add `tailwindcss` dependencies auto.
+   For 4.x: defauts to the latest version `tailwindcss@latest`
+   For 3.x: defauts to the compat version[@tailwindcss/postcss7-compat](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build), because of umi doesn't support postcss8 now）。
 
    You can also install the specific version of tailwindcss. If `tailwindcss` exist in `devDependencies`, plugin will use it, otherwise plugin will use `@tailwindcss/postcss7-compat`。
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umi-plugin-tailwindcss",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "description": "umi@3.0 plugin for tailwindcss",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -34,8 +34,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@tailwindcss/postcss7-compat": "latest",
-    "autoprefixer": "9.x"
+    "autoprefixer": "9.x",
+    "tailwindcss": "latest"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^7.1.1",

src/constants.ts

@@ -6,15 +6,13 @@ export const tailwindcssContent = `/* purgecss start ignore */
 @tailwind utilities;
 `;
 
-export const tailwindConfigJS = `module.exports = {
-    // mode: 'jit',
-    // jit document: https://tailwindcss.com/docs/just-in-time-mode
-    purge: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts'],
-    darkMode: false, // or 'media' or 'class'
-    theme: {},
-    variants: {
-      extend: {},
-    },
-    plugins: [],
-};
+export const tailwindConfigJS = `
+/** @type {import('tailwindcss').Config} */ 
+module.exports = {
+  content: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
 `;

src/index.ts

@@ -34,11 +34,8 @@ export default (api: IApi) => {
       console.log('generate tailwind.config.js.');
       fs.writeFileSync(configPath, tailwindConfigJS, 'utf8');
     }
-    // 优先使用tailwindcss 如果不存在，使用@tailwindcss/postcss7-compat
-    const tailwindcssPackageName =
-      api.pkg.devDependencies && api.pkg.devDependencies.tailwindcss
-        ? 'tailwindcss'
-        : '@tailwindcss/postcss7-compat';
+
+    const tailwindcssPackageName = 'tailwindcss';
 
     const autoprefixerOptions = api.userConfig.autoprefixer;
 
@@ -54,10 +51,8 @@ export default (api: IApi) => {
   // 添加依赖
   api.addProjectFirstLibraries(() => [
     {
-      name: '@tailwindcss/postcss7-compat',
-      path: dirname(
-        require.resolve('@tailwindcss/postcss7-compat/package.json'),
-      ),
+      name: 'tailwindcss',
+      path: dirname(require.resolve('tailwindcss')),
     },
   ]);