vue3 + vite 使用tailwindcss

第7个前端2025-05-23 13:02

第一步：安装依赖

vite版本较低（"vite": "^4.0.0"）所以就使用低版本的tailwindcss

javascript 复制代码

 npm install -D tailwindcss@3.4.1 postcss autoprefixer

第二步：配置文件生成

javascript 复制代码

npx tailwindcss init -p

会自动生成两个文件postcss.config.js和tailwindcss.config.js

第三步：配置一下tailwindcss.config.js content

javascript 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

根据需求配置

第四步：引入样式

这里我是写到了一个css文件中

javascript 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

然后main.ts/js引入css文件

javascript 复制代码

import './assets/style/index.css';

最后测试下效果

javascript 复制代码

<template>
    <div class="home font-bold text-red-500">
        页面模板
    </div>
</template>

结束