在Vue 2项目中使用Tailwind CSS需要几个步骤：
- 安装Tailwind CSS：
npm install -D tailwindcss postcss autoprefixer- 使用Tailwind CSS创建配置文件：
npx tailwindcss init -p- 在
tailwind.config.js中配置Tailwind CSS（如果已经创建了配置文件，则可以直接编辑）：
// tailwind.config.js
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}- 在
postcss.config.js中配置PostCSS（如果没有，则需要创建）：
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}- 在Vue组件中引入Tailwind CSS：
<template>
<div class="text-blue-700">Hello Tailwind!</div>
</template>
<script>
export default {
// ...
}
</script>
<style>
/* 在这里也可以使用Tailwind CSS */
</style>- 在Vue单文件组件中使用Tailwind CSS提供的实用程序类。
- 在
main.js或App.vue中引入Tailwind CSS：
import './assets/css/tailwind.css';确保在package.json中的scripts部分包含正确的构建步骤：
"scripts": {
"build": "vue-cli-service build",
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"postcss": "tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/tailwind.css"
}现在，你应该能够在Vue 2项目中使用Tailwind CSS了。