Windi CSS 从 Tailwind 迁移

包

不再需要您的某些依赖项。如果只有 Tailwind CSS 需要它们，您可以从 package.json 中删除它们。

​package.json​

- "tailwindcss": "*",
- "postcss": "*",
- "autoprefixer": "*",
+ "windicss": "*"

基本样式

您现在可以从 CSS 条目中删除 Tailwind CSS 导入。

- @import 'tailwindcss/base';
- @import 'tailwindcss/components';
- @import 'tailwindcss/utilities';

（可选）根据您使用的集成工具，您可能需要显式导入 virtual:windi.css 条目。请查看工具的文档以获取更多详细信息。

​main.js​

import 'virtual:windi.css'

配置

由于所有变体都会自动启用，因此不再需要变体和清除字段。

颜色和插件需要从 windicss 导入。

我们兼容 ​windi.config.js​ 和 ​tailwind.config.js​。

​windi.config.js​

-const colors = require('tailwindcss/colors')
+const colors = require('windicss/colors')
-const typography = require('@tailwindcss/typography')
+const typography = require('windicss/plugin/typography')

export default {
- purge: {
-   content: [
-     './**/*.html',
-   ],
-   options: {
-     safelist: ['prose', 'prose-sm', 'm-auto'],
-   },
- },
- variants: {
-   extend: {
-     cursor: ['disabled'],
-   }
- },
+ extract: {
+   include: ['./**/*.html'],
+ },
+ safelist: ['prose', 'prose-sm', 'm-auto'],
  darkMode: 'class',
  plugins: [typography],
  theme: {
    extend: {
      colors: {
        teal: colors.teal,
      },
    }
  },
}

清理（​​可选）

如果您不使用它们的其他功能，可以删除以下文件。

- postcss.config.js