unocss和tailwindcss css原子引擎-Toy模板网

这篇具有很好参考价值的文章主要介绍了unocss和tailwindcss css原子引擎。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一种tailwindcss：

tailwindcss官网
https://tailwindcss.com/docs/grid-column
unocss和tailwindcss css原子引擎,css,React,vue,css,前端

基本介绍及优点分析

Tailwind CSS 中文文档 - 无需离开您的HTML，即可快速建立现代网站

unocss和tailwindcss css原子引擎,css,React,vue,css,前端

PostCss 处理 Tailwind Css 基本流程

PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具 | PostCSS中文网
unocss和tailwindcss css原子引擎,css,React,vue,css,前端

在 vscode 中，安装 Tailwind Css 插件，增加代码提示

初始化项目

npm init vue@latest

安装 Tailwind Css

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

执行命令，生成两个配置文件

postcss.config.js
tailwind.config.js

npx tailwindcss init -p

配置文档参考：配置 - Tailwind CSS 中文文档

修改配置文件 tailwind.config.js

2.6


module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],

**```
3.0版本**

```cpp

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

创建 index.css，并在 main.ts 中引入

创建 index.css

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

第二种unocss

unocss官网
https://unocss.dev/config/rules
unocss和tailwindcss css原子引擎,css,React,vue,css,前端
unocss：最好配合vite去构建文件
操作搜索页面：

unocss和tailwindcss css原子引擎,css,React,vue,css,前端

unocss 原子化

重新构想原子化CSS - 知乎
unocss和tailwindcss css原子引擎,css,React,vue,css,前端

unocss 原子化参考资料

由于个人感觉此模块在实际项目中应用很少，所以不做记录，但是为了以防万一，先记下来之前看过的文章及视频，讲的非常清晰，给大佬点赞~~
小满Vue3（第三十七章 unoCss原子化）_哔哩哔哩_bilibili
小满Vue3第三十七章（unocss原子化）_小满zs的博客-CSDN博客
unocss和tailwindcss css原子引擎,css,React,vue,css,前端

unocss配置(案例)

安装依赖

npm i --save unocss,@unocss/reset

mian.ts中引入

import '@unocss/reset/tailwind.css' //初始化css
import 'uno.css'//引入unocss

新建unocss.config.ts

可查看配置文档
unocss和tailwindcss css原子引擎,css,React,vue,css,前端

import {
  defineConfig,
  presetAttributify,
  presetUno,
  presetIcons,
} from "unocss";
export default defineConfig({
  //预设：m-3 p-3
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({ scale: 1.2, warn: true }),
  ],
  //快捷方式
  shortcuts: [
    ["wh-full", "w-full h-full"],
    ["f-c-c", "flex justify-center items-center"],
    ["flex-col", "flex flex-col"],
    ["text-ellipsis", "truncate"],
    [
      "icon-btn",
      "text-16 inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-primary !outline-none",
    ],
  ],
  //正则
  rules: [
    [/^bc-(.+)$/, ([, color]) => ({ "border-color": `#${color}` })],
    [
      "card-shadow",
      {
        "box-shadow":
          "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017",
      },
    ],
  ],
  theme: {
    colors: { primary: "var(--primary-color)", dark_bg: "var(--dark-bg)" },
  },
});

vite.config.ts中注入

import unocss from 'unocss/vite'
 
plugins: [unocss(),react()]//unocss一定要放react之前

处理unocss写入标签报错

src目录下新建 html.d.ts

//react
import type {AttributifyAttributes} from '@unocss/preset-attributify'
declare module "react"{
    interface HTMLAttributes<T> extends AttributifyAttributes {}//tsx标签写uno不报错
}
//vue
import type {AttributifyAttributes} from '@unocss/preset-attributify'
declare module "@vue/runtime-dom"{
    interface HTMLAttributes extends AttributifyAttributes {}//tsx标签写uno不报错
}