Windi CSS 從 Tailwind 遷移

2023-02-16 17:58 更新

不再需要您的某些依賴項(xiàng)。如果只有 Tailwind CSS 需要它們,您可以從 package.json 中刪除它們。

?package.json?

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

基本樣式

您現(xiàn)在可以從 CSS 條目中刪除 Tailwind CSS 導(dǎo)入。

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

(可選)根據(jù)您使用的集成工具,您可能需要顯式導(dǎo)入 virtual:windi.css 條目。請查看工具的文檔以獲取更多詳細(xì)信息。

?main.js?

import 'virtual:windi.css'

配置

由于所有變體都會(huì)自動(dòng)啟用,因此不再需要變體和清除字段。

顏色和插件需要從 windicss 導(dǎo)入。

我們兼容 ?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


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號