UnoCss学习笔记

标签：Tailwind Unocss 笔记 学习 tailwind tailwindcss UnoCss import PostCSS

配置

通过 npm 安装 Tailwind

对于大多数项目（并利用 Tailwind 的自定义功能），您需要通过 npm 安装 Tailwind 及其依赖项。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
如果出现如下报错
Error: PostCSS plugin tailwindcss requires PostCSS 8.
在这种情况下，您应该安装 PostCSS 7 兼容性版本。

作为 PostCSS 插件来添加 Tailwind

将 tailwindcss 和 autoprefixer 添加到您的 PostCSS 配置中。 多数情况下，这是项目根目录下的 postcss.config.js 文件，但也可能是 .postcssrc 文件或是由 package.json 文件中的 postcss 键所指定。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

包含 Tailwind 到您的 CSS 中

普通项目引入

如果您尚未创建一个 CSS 文件，请使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式：

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Vue OR React引入

// app.js
import "tailwindcss/tailwind.css"

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 引入Unocss
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({ // 使用Unocss
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()],
    })
  ]
})

使用

https://www.tailwindcss.cn/docs/container

标签：Tailwind,Unocss,笔记,学习,tailwind,tailwindcss,UnoCss,import,PostCSS
From： https://www.cnblogs.com/guozhiqiang/p/16892171.html