一. 安装依赖

npm install -D tailwindcss postcss autoprefixer

二. 使用 Tailwind CLI 来为项目生成 Tailwind 配置文件 与 postcss 配置文件

npx tailwindcss init -p --ts

修改tailwind.config.ts文件

import type { Config } from 'tailwindcss'

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

三. 修改src/assets/main.css添加以下代码

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

修改后可启动项目

vscode插件安装

1.搜索Tailwind CSS IntelliSense安装 由于VS Code软件本身的原因，即使安装此官方插件过后，仍然有可能出现警告提示，需要在VS Code中使用Tailwind CSS官方插件提供的建议设置： 2.在设置中搜索 files.associations,点击 添加项填入键与值,用来告诉 VS Code 始终在 Tailwind CSS 模式下打开 .css 文件：

键： *.css
值： tailwindcss

3.默认情况下，VS Code 在编辑“字符串”内容时不会触发完成，例如在 JSX 属性值中。更新 editor.quickSuggestions 设置可能会改善您的体验：

再去搜索 editor.quickSuggestions
点击 strings 编辑项，设为 on
更多功能