Vite Vue3项目中unocss/vite插件实现tailwindcss_vite tailwindcss

一、参考

1. TailwindCSS中文文档 | TailwindCSS中文网
2. Vue3配置tailwindcss并在vscode中智能提示
3. 在vue3中（vite）引入unocss，安装配置unocss
4. tailwindcss 快速入门安装

二、背景介绍

最近在学习Vite + Vue3项目的最佳实践， 看到一些开源的项目使用到了'unocss/vite'插件，趁机了解了一下Tailwind 或者 windi 样式库。

三、tailwindcss 库介绍

tailwindcss 库的优势，可以参考 Tailwind CSS是什么？有什么优势？ 视频

四、vscode 安装UnoCSS插件

该插件用于vscode 在开发 tailwindcss 样式自动提示

五、快速搭建 tailwindcss 环境

参考 tailwindcss 快速入门安装

1. 安装依赖

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm i -D unocss
1
2

2. 在vite.config.ts使用插件

import Unocss from 'unocss/vite'
export default {
  plugins: [
    Unocss(),
  ],
}
1
2
3
4
5
6

3. 在man.ts（main.js）中引入css

import 'uno.css'
1

4. 执行npx tailwindcss init -p 命令
   会创建出tailwind.config.js 和 postcss.config.js两个配置文件，然后做如下修改：

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
1
2
3
4
5
6
7
8
9
10
11

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

1
2
3
4
5
6
7