TailwindCss在vue3项目中的使用

1 安装 tailwindcss和postcss

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

2 初始化配置文件

npx tailwindcss init -p

3 在tailwind.config.js添加对vue文件的识别，其他配置可以在配置文档中查看详细参数设置

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

如果你介意 tailwind.config.js 的文件是 js，那么直接改为 ts 之后换成以下代码。注意postcss.config.js 不能改成 ts

/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

4 在src 目录下创建目录styles，并在该目录下创建Tailwind.css，用 @tailwind 指令添加 Tailwind功能。

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

6 在main.ts 中引入Tailwind.css

import "./styles/Tailwind.css"

7 使用实例

<div class="w-full mx-auto text-[#fff] text-[14px]">
    <div class="flex flex-wrap sm:px-1">
      <div class="w-full sm:w-1/3 p-2 box pb-0 sm:px-1">
        <div class="bg-red-600 p-1">测试</div>
      </div>
      <div class="w-full sm:w-1/3 p-2 box pb-0 sm:px-1">
        <div class="bg-red-600 p-1">测试</div>
      </div>
      <div class="w-full sm:w-1/3 p-2 box pb-0 sm:px-1">
        <div class="bg-red-600 p-1">测试</div>
      </div>
      <div class="w-full sm:w-1/3 p-2 box pb-0 sm:px-1">
        <div class="bg-red-600 p-1">测试</div>
      </div>
      <div class="w-full sm:w-1/3 p-2 box pb-0 sm:px-1">
        <div class="bg-red-600 p-1">测试</div>
      </div>
    </div>
  </div>