vue3配置 tailwindcss

标签：前端  CSS  tailwindcss

时间：2024-01-24

依赖安装

1. 创建项目

npm init vue@latest

2. 安装 tailwindcss

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

3. 生成配置文件

npx tailwindcss init -p

4. 修改配置文件

// tailwindcss v2.6版本
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
​
// tailwindcss v3.0版本以上
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. 引入项目

// 创建一个与app.vue同级的tailwind.css文件，并引入main.js
​
@tailwind base;
@tailwind components;
@tailwind utilities;

import '../tailwind.css'

作者：小满zs

链接：blog.csdn.net/qq119556631…

来源：CSDN

版权声明：本文为博主小满zs的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。