UnoCSS

介绍

unocss 与 tailwindcss 相比我更推荐 unocss，它简洁轻量编译速度快文件更小，并且兼容所有 tailwindcss 语法，你可以直接照着 tailwindcss 文档 class 名写

AI：UnoCSS 对比 TailwindCSS

特点	UnoCSS	TailwindCSS
优点	更小的文件大小	更广泛的社区支持
	更快的编译速度	更多的预定义样式
	更好的响应式支持	更多的插件和工具
	更简洁的类名	可定制性更强,依赖 postcss
缺点	社区支持相对较小	文件大小较大
	相对较新，可能存在稳定性问题	学习曲线较陡
	可能缺少一些高级特性	可能生成冗余的样式
		生成的 HTML 代码较多

安装

Vite

安装依赖

# uniapp选用 0.58 版本
pnpm add -D unocss@0.58

# uniapp选用 0.58 版本
yarn add -D unocss@0.58

# uniapp选用 0.58 版本
npm install -D unocss@0.58

Tip

UnoCSS 从 v0.59 开始只提供 ESM 支持，相关信息请参考 Pure ESM packageopen in new window

安装插件

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

创建 uno.config.ts 文件:

// uno.config.ts
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

在入口项目入口添加 unocss 的引入

此处我以 vue3 为例

// main.ts
import 'virtual:uno.css'

🎉 你已完成集成配置，快去验证一下

<p class="bg-[red]">测试</p>

Tip

如果您的开发语言是 js，上述 ts 后缀改为 js 即可
UniApp | 微信小程序｜ taro 推荐安装预设 unocss-preset-weappopen in new window
点击这里open in new window查看更多官方｜社区预设

Webpack4 | Vue-cli(Vue2)

以 vue-element-template 为例，实现集成 unocss

vue-element-template 的构成是 vue2 + vue-cli (webpack4)

安装

pnpm add -D unocss @unocss/webpack

npm install unocss @unocss/webpack -D

yarn add unocss @unocss/webpack -D

安装插件

// vue.config.js
const UnoCSS = require("@unocss/webpack").default;

module.exports = {
  configureWebpack: {
    plugins: [UnoCSS({})],
  },
  chainWebpack(config) {
    // 兼容 unocss 样式不生效
    config.module.rule('vue').uses.delete('cache-loader');
    config.module.rule('tsx').uses.delete('cache-loader');
    config.merge({
      cache: false,
    });
  },
  css: {
    extract: {
      // 参考：https://www.cnblogs.com/GoodMemoryBlog/p/17370935.html
      ignoreOrder: true
    },
  }
}

创建 uno.config.js 文件:

// uno.config.js
import {
    defineConfig,
    presetAttributify,
    presetUno,
} from "unocss";

export default defineConfig({
  presets: [
        presetUno(),
        presetAttributify(),
    ],
});

在 main.js 中引入

// main.js
import "uno.css";

常见问题

unocss webpack 不生效问题open in new window

智能提示

踩坑必看

注意

这些是我个人踩过的一些坑，希望能给你提供帮助～ (๑•.•๑)

1. VsCode 中 TailwindCSS 与 UnoCSS 的插件是不能并存的，你得禁用 TailwindCSS 插件

# UnoCSS

# 介绍

# 安装

# Vite

# Webpack4 | Vue-cli(Vue2)

# 常见问题

# 智能提示

# 踩坑必看