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