Tailwind CSS 在vue里 的使用

1. 安装
   npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
2. 创建您的配置文件

• 生成您的 tailwind.config.js 和 postcss.config.js 文件：
  npx tailwindcss init -p
• 您的项目根目录创建一个最小化的 tailwind.config.js 文件：

// tailwind.config.js
module.exports = {purge: [],darkMode: false, // or 'media' or 'class'theme: {extend: {},},variants: {extend: {},},plugins: [],
}

• 您的项目根目录创建一个最小化的 postcss.config.js 文件：

// postcss.config.js
module.exports = {plugins: {tailwindcss: {},autoprefixer: {},},
}

3. 配置 Tailwind

// tailwind.config.js
//V3版本
module.exports = {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},variants: {extend: {},},plugins: [],
}  

4. 您的 CSS 中引入 Tailwind

• 创建 ./src/index.css 文件 并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

5. 导入css文件

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'createApp(App).mount('#app')