跳到主要内容

原子化

2023年12月18日
柏拉文
越努力，越幸运

一、认识​

在目前的社区当中，CSS 原子化框架主要包括Tailwind CSS 和 Windi CSS。Windi CSS 作为前者的替换方案，实现了按需生成 CSS 类名的功能，开发环境下的 CSS 产物体积大大减少，速度上比Tailwind CSS v2快 20~100 倍！当然，Tailwind CSS 在 v3 版本也引入 JIT(即时编译) 的功能，解决了开发环境下 CSS 产物体积庞大的问题。

二、Windi CSS​

2.1 安装​

首先安装 windicss 及对应的 Vite 插件:

pnpm i windicss vite-plugin-windicss -D

2.2 vite.config.js 配置​

在 vite.config.js 配置文件中来使用它

// vite.config.ts
import windi from "vite-plugin-windicss";

export default {
  plugins: [
    // 省略其它插件
    windi()
  ]
}

2.3 main.tsx 导入 import​

接着要注意在 src/main.tsx 中引入一个必需的 import 语句:

// main.tsx
// 用来注入 Windi CSS 所需的样式，一定要加上！
import "virtual:windi.css";

2.4 windi.config.ts 配置​

在项目根目录新建 windi.config.ts，配置如下:

import { defineConfig } from "vite-plugin-windicss";

export default defineConfig({
  // 开启 attributify
  attributify: true,
  shortcuts: {
    "flex-c": "flex justify-center items-center",
  }
});

shortcuts: 用来封装一系列的原子化能力，尤其是一些常见的类名集合

attributify: 翻译过来就是属性化，也就是说我们可以用 props 的方式去定义样式属性

2.5 shim.d.ts 增加类型声明​

不过使用attributify的时候需要注意类型问题，你需要添加types/shim.d.ts来增加类型声明，以防类型报错:

import { AttributifyAttributes } from 'windicss/types/jsx';

declare module 'react' {
  type HTMLAttributes<T> = AttributifyAttributes;
}

2.6 shortcuts 和 attributify 使用​

shortcuts 语法如下:

<div className="flex-c"></div>
<!-- 等同于下面这段 -->
<div className="flex justify-center items-center"></div>

attributify 语法如下:

<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>

三、Tailwind CSS​

3.1 安装​

pnpm install -D tailwindcss postcss autoprefixer

3.2 tailwind.config.js 配置​

// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3.3 postcss.config.js 配置​

// postcss.config.js
// 从中你可以看到，Tailwind CSS 的编译能力是通过 PostCSS 插件实现的
// 而 Vite 本身内置了 PostCSS，因此可以通过 PostCSS 配置接入 Tailwind CSS 
// 注意: Vite 配置文件中如果有 PostCSS 配置的情况下会覆盖掉 post.config.js 的内容!
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3.4 入口文件必要的样板代码​

@tailwind base;
@tailwind components;
@tailwind utilities;

3.5 安心地使用 Tailwind 样式​

// App.tsx

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div>
      <header className="App-header">
        <img src={logo} className="w-20" alt="logo" />
        <p className="bg-red-400">Hello Vite + React!</p>
      </header>
    </div>
  );
}

export default App;