Переход с Tailwind CSS #

Упаковка #

Некоторые из ваших зависимостей больше не требуются. Вы можете удалить их, если они были нужны только для Tailwind CSS.

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

Базовые стили #

Теперь вы можете удалить импорт CSS Tailwind из записи css.

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

(Необязательно) В зависимости от используемых вами инструментов интеграции вам может потребоваться явно импортировать запись virtual:windi.css. Пожалуйста, проверьте документацию по инструментам для получения более подробной информации.

import 'virtual:windi.css'

Конфигурации #

Поскольку все варианты автоматически включены, поля variant и purge больше не нужны.

Вместо этого, colors и plugins нужно импортировать из windicss.

Мы совместимы как с windi.config.js, так и с tailwind.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