vue3-最佳实战（Tailwind CSS 使用）

1.创建一个vue项目

npm create vue@latest

2.集成Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p 
//动态生成tailwind.config.js与postcss.config.js两个文件

3.创建文件main.css，内容如下

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

4.在main.js 引入

import './assets/main.css'

5.在vue.config.js 文件添加

import tailwindcss from 'tailwindcss'

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss],
    },
  }
})

6.使用案例

  <div class="flex flex-row">
      <div class="w-full basis-1/4 bg-blue-200 p-10 text-3xl flex justify-center">左侧盒子</div>
      <div class="w-full basis-1/2 bg-blue-300 p-10 text-3xl flex justify-center line-through">中间盒子</div>
      <div class="w-full basis-1/4  p-10 text-3xl flex justify-center bg-gradient-to-r from-violet-500 to-fuchsia-500">右侧盒子</div>
    </div>

7.效果如下：