5分钟了解 Windi CSS
Hi, 我是 Lem, 最近在学习Tailwindcss，进行了下学习记录：
前言
Windi CSS 是一个下一代实用程序优先的 CSS 框架
如果您已经熟悉 Tailwind CSS，可以考虑将 Windi CSS 作为 Tailwind 的按需替代品，它提供了更快的加载时间、与 Tailwind v2.0的完全兼容性以及一系列额外的酷功能。
为什么会有 windicss?
引用作者的说明
When my project became larger and there were about dozens of components, the initial compilation time reached 3s, and hot updates took more than 1s with Tailwind CSS. - @voorjaar
通过扫描您的 HTML 和 CSS 并根据需要生成实用程序，Windi CSS 能够在开发中提供更快的加载时间和更快的 HMR，并且不需要在生产中进行清除
安装
1.使用webpack插件方式
npm i windicss-webpack-plugin windicss -D
添加 webpack 配置
// webpack.config.js
const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
export default {
// ...
plugins: [
new WindiCSSWebpackPlugin(),
],
}
在项目中引入
// main.js
import 'windi.css'
2.使用 postcss 方式
npm i -D postcss-windicss windicss -D
在项目根目录下创建 postcss.config.js
// postcss.config.js
module.exports = {
plugins: {
'postcss-windicss': { /* ... */ },
},
}
在你的 css 入口文件中添加@windss:
/* main.css */
@windicss;
配置windi， 支持windi.config.ts、windi.config.js、tailwind.config.ts、tailwind.config.js 配置文件，配置语法跟 tailwind 几乎一样
import { defineConfig } from 'windicss/helpers'
import colors from 'windicss/colors'
export default defineConfig({
darkMode: 'class', // or 'media'
theme: {
extend: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
colors: {
blue: colors.sky,
red: colors.rose,
pink: colors.fuchsia,
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
spacing: {
128: '32rem',
144: '36rem',
},
borderRadius: {
'4xl': '2rem',
},
},
}
})
结合 vscode 插件一起使用
使用
与TailwindCSS用法类似，但增加了以下能力
变量组合
通过使用括号对同一变体应用实用程序。
// 编译前
bg-blue-200 font-light p-2
hover:(bg-gray-400 font-medium)
// 编译后
.bg-blue-200 {
--tw-bg-opacity: 1;
background-color: rgba(191, 219, 254, var(--tw-bg-opacity));
}
.hover:bg-gray-400:hover {
--tw-bg-opacity: 1;
background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
}
.font-light {
font-weight: 300;
}
.hover:font-medium:hover {
font-weight: 500;
}
.p-2 {
padding: 0.5rem;
}
快捷方式
在处理类似的实用程序集时，重复性很常见。我们提供了这个“快捷方式”功能，允许您提供工具名称的组合，您可以在应用程序的任何地方重复使用，而无需重复自己。
修改配置文件进行设置，
export default {
theme: {
/* ... */
},
shortcuts: {
'btn': {
'color': 'white',
'@apply': 'py-2 px-4 font-semibold rounded-lg',
'&:hover': {
'@apply': 'bg-green-700',
'color': 'black',
},
},
'btn-green': 'text-white bg-green-500 hover:bg-green-700',
},
}
使用方式
// 添加如下类名
btn btn-green
// 即可生成
.btn {
color: white;
border-radius: 0.5rem;
font-weight: 600;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
}
.btn:hover {
--tw-bg-opacity: 1;
background-color: rgba(4, 120, 87, var(--tw-bg-opacity));
color: black;
}
.btn-green {
--tw-bg-opacity: 1;
background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.btn-green:hover {
--tw-bg-opacity: 1;
background-color: rgba(4, 120, 87, var(--tw-bg-opacity));
}
指示符
您可以使用指令和 CSS 的组合来利用可用的实用工具。
@apply
使用@apply内联任何现有的实用工具类
当您在 HTML 中找到希望提取到新组件的通用实用程序模式时，这非常有用。
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 hover:bg-blue-700 text-white;
padding-top: 1rem;
}
// 生成 css
.btn {
border-radius: 0.25rem;
font-weight: 700;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
}
.btn-blue {
--tw-bg-opacity: 1;
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
padding-top: 1rem;
}
.btn-blue:hover {
--tw-bg-opacity: 1;
background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
}
该方式比 Tailwindcss 复用样式写法要方便，Tailwindcss 需要使用 @layer 进行 components 扩展
@layer components {
.btn-primary {
@apply py-2 px-4 font-semibold rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-opacity-75;
}
}
@variants
您可以生成**screen variants, state variants, theme variants** 使用您自己的实用程序，方法是将它们的定义包装在@Varient 中。
@variants focus, hover {
.rotate-0 {
transform: rotate(0deg);
}
.rotate-90 {
transform: rotate(90deg);
}
}
@variants dark {
.bg-color {
background-color: #1c1c1e;
}
}
// 生成 css
.rotate-0:focus {
transform: rotate(0deg);
}
.rotate-90:focus {
transform: rotate(90deg);
}
.rotate-0:hover {
transform: rotate(0deg);
}
.rotate-90:hover {
transform: rotate(90deg);
}
.dark .bg-color {
background-color: #1c1c1e;
}
@screen
@ screen 指令允许您创建按名称引用断点的媒体查询，而不是在自己的 CSS 中复制断点的值。
@screen sm {
.custom {
@apply text-lg;
}
}
// 生成 css
@media (min-width: 640px) {
.custom {
font-size: 1.125rem;
line-height: 1.75rem;
}
}
@layer
@layer 指令设置了应用每个类的顺序。有效的层是base, components, utilities。
@layer components {
.components {
@apply bg-red-500;
}
}
@layer utilities {
.utilities {
max-width: 768px;
}
}
@layer base {
base {
margin-left: auto;
}
}
.normal {
margin-right: auto; /* components by default */
}
用法和 Tailwindcss 类似，但个人感觉 components 类复用可以使用前边的 @apply 替代写法更简单
@layer components 中定义样式复用，在webpack-dev-server 中存在缓存的情况，既@layer components修改了类名称，该类名不会失效，webpack-dev-server 重启可解决
属性模式
有了这个特性，您可以用 HTML 属性编写 windi 类。
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
attributify: true,
})
使用方式
<button
bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
>
Button
</button>
开启前缀
export default {
attributify: {
prefix: 'w:',
},
}
<button
w:bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
w:text="sm white"
w:font="mono light"
w:p="y-2 x-4"
w:border="2 rounded blue-200"
>
Button
</button>
可视化分析
用于 Windi CSS 的可视化分析工具。浏览您的实用程序使用情况，获得您的设计系统的概述，识别“不良实践”，等等！
在项目根目录中运行以下命令
npx windicss-analysis
分析报告可于 http://localhost:8113/ 查看
总结
windicss 在 Tailwind CSS 基础上进行优化和扩展，可理解为优化版的后者，使用起来更方便和高效，在属性 Tailwind CSS 的基础上使用 windicss 没啥成本，打包产物也更轻量一些，推荐使用
公众号链接：web5分钟