这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战
首先贴出两个官网的地址：
背景
起初，我在项目中为了方便书写样式，选择了tailwindcss,但是在后期开发的时候，发现了tailwindcss给我带来许多的困扰，觉得很阻碍我的开发流程。于是我开始寻找它的替代品，于是我便开始了windicss之路。
为什么选择windicss
这里先引入官网的介绍：
引用偶像antfu的话应该可以说明他创建 Windi CSS 的动机：
当我的项目变大了，大约有几十个组件时，初始编译时间达到了3s，热更新用Tailwind CSS花了1s多。
- @voorjaar
通过扫描您的 HTML 和 CSS 并按需生成实用程序，Windi CSS 能够在开发中提供更快的加载时间和快速的 HMR，并且不需要在生产中清除。
tailwindcss拥有我们平时用不到的产物，而我们有时候真正需要的缺要去配置，多多少少有点矛盾。
结合vite按需加载的设计理想，我觉得我应该暂时去拥抱windcss。
为什么是暂时呢？ 因为偶像最近写了一篇博文，简直是Amazing！，读起来就觉得很香呀。刚刚看到淘系前端也转载了，可谓它的意义非凡。
github：unocss
后续我也会逐步过渡到 unocss
tailwindcss
install
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
首先我们安装tailwind的时候还需要同时安装postcss
npx tailwindcss init -p
同时我们需要使用命令，创建配置文件
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
配置文件作用是自定义我们的css
const colors = require('tailwindcss/colors')
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
colors: {
transparent: 'transparent',
black: colors.black,
white: colors.white,
gray: colors.trueGray,
indigo: colors.indigo,
red: colors.rose,
yellow: colors.amber,
primary: '#adbac7',
muted: '#3734e7',
default: '#22272e'
},
extend: {
borderColor: {
...
}
}
},
variants: {
extend: {}
},
plugins: []
}
用多少配多少，个人觉得非常的繁琐。
// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
usage
你可以初步的阅读一下文档，即可开始使用。文档也很简单
windicss
install
Windi CSS 为主流工具提供了最佳的适配。你可以选择你喜欢的工具并开始使用 Windi CSS。
推荐使用vite
安装相关包：
npm i -D vite-plugin-windicss windicss
然后，在你的 Vite 配置中添加插件：
vite.config.js
import WindiCSS from 'vite-plugin-windicss'
export default {
plugins: [
WindiCSS(),
],
}
最后，在你的 Vite 入口文件中导入 virtual:windi.css：
main.js
import 'virtual:windi.css'
配置文件
// tailwind.config.ts
// 例如
import { defineConfig } from 'windicss/helpers'
import formsPlugin from 'windicss/plugin/forms'
export default defineConfig({
darkMode: 'class',
safelist: 'p-3 p-4 p-5',
theme: {
extend: {
colors: {
teal: {
100: '#096',
},
},
},
},
plugins: [formsPlugin],
})
在项目中引入：
// main.ts
import 'virtual:windi.css' //vite的插件会进行解析
项目迁移
###Package#
一些依赖不再是必须的。如果它们只是 Tailwind CSS 的依赖。你可以安全地移除它们。
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'
配置文件#
所有的可变修饰 (variants) 都是 默认启用 的，不再需要对 variant 和 purge 进行配置。
colors 和 plugins 需要从 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
