vite+vue 项目引入tailwindcss

vite+vue 项目引入tailwindcss

创建您的工程

如果您还没有建立一个新的 Vite 项目，请先创建一个新的项目。

npm init @vitejs/app my-project
cd my-project

npm 安装 Vite 的前端依赖。

npm install

初始化 Tailwind CSS

通过 npm 安装 tailwindcss 及依赖

npm install -D tailwindcss postcss autoprefixer

生成配置文件(tailwind.config.js 和 postcss.config.js)

npx tailwindcss init -p

配置tailwind.config.js

export default {
  // content:[], 默认为空
  // 添加 tailwind.config.js 文件中所有模板文件的路径。
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加指令到 CSS

//src/style/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

main.js中引入样式文件

//main.js
import './style/tailwind.css' 

多个公共样式文件

//index.scss
@import './tailwind.css'
@import './xxx.scss'
//index.js
import './index.scss' 
//main.js
import './style/index' 

重新运行项目

npm run dev

2.x中文文档

方便查找class名称
https://tailwind.docs.73zls.com/docs/responsive-design

官网

https://www.tailwindcss.cn/