您现在的位置是：首页 > 文章详情

Windi CSS —— 能替代 Tailwind CSS 的 CSS 框架

日期：2021-12-23点击：7647收藏

Windi CSS 是下一代工具优先的 CSS 框架。如果你已经熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。

为什么选择 Windi CSS？

通过扫描 HTML 和 CSS 按需生成工具类（utilities），Windi CSS 致力于在开发中提供更快的加载体验以及更快的 HMR，并且在生产环境下无需对 CSS 进行 Purge（一种在生产环境中对未使用的 CSS 进行清除而节省体积的技术）。

基础用法

Windi CSS 支持 Tailwind CSS 的所有工具类，无需任何额外配置。

你可以像平常一样正常编写你的组件，同时在样式表中使用实用类：

 <div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)"> <img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" /> <div class="text-center space-y-2 sm:text-left"> <div class="space-y-0.5"> <p class="text-lg text-black font-semibold">Erin Lindford</p> <p class="text-gray-500 font-medium">产品经理</p> </div> <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)"> 消息 </button> </div> </div>

只有你使用的工具类才会产生相应的 CSS。

集成

我们为主流工具提供了最佳的适配，在每一个工具上都有最好的开发体验。请参阅集成指南，选择你最喜欢的工具即刻体验！

配置 Windi CSS

Windi CSS 中的配置与你在 Tailwind CSS 中所期望的相似，但有额外的增强和特性。

如果你要从 Tailwind 迁移，请先查看迁移指南。

配置文件

默认情况下，Windi CSS 会在你的项目根目录下搜索配置文件。以下是有效的名称：

windi.config.ts
windi.config.js
tailwind.config.ts
tailwind.config.js

得益于 sucrase，支持原生 ES 模块和开箱即用的 TypeScript。

为了获得配置的类型检查，你可以从 windicss/helpers 导入 defineConfig 函数：

windi.config.ts

 import { defineConfig } from 'windicss/helpers' export default defineConfig({ /* 配置项... */ })

windi.config.js

 // @ts-check - enable TS check for js file import { defineConfig } from 'windicss/helpers' export default defineConfig({ /* 配置项... */ })

defineConfig 是带有类型提示的帮助函数，这意味着如果你不需要自动补全/类型检查，你也可以忽略此处。

windi.config.js

 export default { /* 配置项... */ }

你可以使用编辑器的自动补全功能，来查看可用的配置字段。对功能配置的描述将在对应页面中进行展示。

配置示例

windi.config.js

 import { defineConfig } from 'windicss/helpers' import colors from 'windicss/colors' import plugin from 'windicss/plugin' export default defineConfig({ darkMode: 'class', // or 'media' theme: { extend: { screens: { 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', }, colors: { gray: colors.coolGray, blue: colors.lightBlue, red: colors.rose, pink: colors.fuchsia, }, fontFamily: { sans: ['Graphik', 'sans-serif'], serif: ['Merriweather', 'serif'], }, spacing: { 128: '32rem', 144: '36rem', }, borderRadius: { '4xl': '2rem', }, }, }, plugins: [ plugin(({ addUtilities }) => { const newUtilities = { '.skew-10deg': { transform: 'skewY(-10deg)', }, '.skew-15deg': { transform: 'skewY(-15deg)', }, } addUtilities(newUtilities) }), plugin(({ addComponents }) => { const buttons = { '.btn': { padding: '.5rem 1rem', borderRadius: '.25rem', fontWeight: '600', }, '.btn-blue': { 'backgroundColor': '#3490dc', 'color': '#fff', '&:hover': { backgroundColor: '#2779bd', }, }, '.btn-red': { 'backgroundColor': '#e3342f', 'color': '#fff', '&:hover': { backgroundColor: '#cc1f1a', }, }, } addComponents(buttons) }), plugin(({ addDynamic, variants }) => { addDynamic('skew', ({ Utility, Style }) => { return Utility.handler .handleStatic(Style('skew')) .handleNumber(0, 360, 'int', number => `skewY(-${number}deg)`) .createProperty('transform') }, variants('skew')) }), require('windicss/plugin/filters'), require('windicss/plugin/forms'), require('windicss/plugin/aspect-ratio'), require('windicss/plugin/line-clamp'), require('windicss/plugin/typography')({ modifiers: ['DEFAULT', 'sm', 'lg', 'red'], }), ], })