Windi CSSTailwind CSS 的替代方案
Windi CSS 是下一代工具優(yōu)先的 CSS 框架。如果你已經(jīng)熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供應(yīng)的 Tailwind 替代方案，它為你提供了更快的加載體驗(yàn)，完美兼容 Tailwind v2.0，并且擁有很多額外的酷炫功能。
為什么選擇 Windi CSS？
通過掃描 HTML 和 CSS 按需生成工具類（utilities），Windi CSS 致力于在開發(fā)中提供 更快的加載體驗(yàn) 以及更快的 HMR，并且在生產(chǎn)環(huán)境下無需對(duì) CSS 進(jìn)行 Purge（一種在生產(chǎn)環(huán)境中對(duì)未使用的 CSS 進(jìn)行清除而節(jié)省體積的技術(shù)）。
基礎(chǔ)用法
Windi CSS 支持 Tailwind CSS 的所有工具類，無需任何額外配置。
你可以像平常一樣正常編寫你的組件，同時(shí)在樣式表中使用實(shí)用類：
<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">產(chǎn)品經(jīng)理</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>
只有你使用的工具類才會(huì)產(chǎn)生相應(yīng)的 CSS。
集成
我們?yōu)橹髁鞴ぞ咛峁┝俗罴训倪m配，在每一個(gè)工具上都有最好的開發(fā)體驗(yàn)。請(qǐng)參閱 集成指南，選擇你最喜歡的工具即刻體驗(yàn)！
配置 Windi CSS
Windi CSS 中的配置與你在 Tailwind CSS 中所期望的相似，但有額外的增強(qiáng)和特性。
如果你要從 Tailwind 遷移，請(qǐng)先查看 遷移指南。
配置文件
默認(rèn)情況下，Windi CSS 會(huì)在你的項(xiàng)目根目錄下搜索配置文件。以下是有效的名稱：
windi.config.tswindi.config.jstailwind.config.tstailwind.config.js
得益于 sucrase，支持原生 ES 模塊和開箱即用的 TypeScript。
為了獲得配置的類型檢查，你可以從 windicss/helpers 導(dǎo)入 defineConfig 函數(shù)：
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
/* 配置項(xiàng)... */
})
// @ts-check - enable TS check for js file
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
/* 配置項(xiàng)... */
})
defineConfig 是帶有類型提示的幫助函數(shù)，這意味著如果你不需要自動(dòng)補(bǔ)全/類型檢查，你也可以忽略此處。
export default {
/* 配置項(xiàng)... */
}
你可以使用編輯器的自動(dòng)補(bǔ)全功能，來查看可用的配置字段。對(duì)功能配置的描述將在對(duì)應(yīng)頁(yè)面中進(jìn)行展示。
配置示例
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'],
}),
],
})