tailwind的使用与配置

1. 安装插件 Tailwind CSS IntelliSense
2. 安装Tailwind CSS

npm install -D tailwindcss
npx tailwindcss init

3. 配置模板文件的路径 将tailwind.config.js改为

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

4. 在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。

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

5. 开启 Tailwind CLI 构建流程（input.css是你的主css文件 output.css是你想要导出到的css文件）

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

6. 在你的 HTML 代码的head部分进行引用 Tailwind的output.css文件

    <link href="./src/assets/css/output.css" rel="stylesheet">