原子化CSS

原子化CSS就是拆分成最小的CSS类，如一个类就定义的CSS功能，这种方式更容易维护和复用，提高开发效率，减少代码冗余。tailwind css\unocss\windcss等都是比较知名的库。

TIP

我就用平时最常见vite+vue为例了。为了更好的使用tailwind.css，需要在vscode中安装插件：Tailwind CSS IntelliSense

安装命令

npm install tailwindcss @tailwindcss/vite

npm install tailwindcss @tailwindcss/vite

需要在src目录下新建一个tailwind.css`文件

css

@import "tailwindcss";

@import "tailwindcss";

mian.js入口文件配置

import "./tailwind.css"

import "./tailwind.css"

vite.config.js文件配置

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'	//需配置
export default defineConfig({
  plugins: [
    tailwindcss(),	//需配置
  ],
})

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'	//需配置
export default defineConfig({
  plugins: [
    tailwindcss(),	//需配置
  ],
})

TIP

注：如果你不知道那些类名怎么写，可以查看官方文档：https://tailwindcss.com/docs/columns

原子化CSS ​

原子化CSS