在Vue+element+Vite项目中设置 Tailwind CSS。

1. 请先创建一个新的Vite项目。最常见的方法是使用 Create Vite。

   npm init vue@latest

起好项目的名称，然后一路回车即可。

2. 安装 tailwindcss 及其对等依赖项，然后生成 tailwind.config.js 和 postcss.config.js 文件。

   npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

3. 在 tailwind.config.js 文件中添加所有模板文件的路径。

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

4. 将每个 Tailwind 层的 @tailwind 指令添加到您的 ./src/style/taiwind.css 文件中。

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

5. 在main.js中添加taiwind.css的引用：

   import ”./style/tailwind.css”;

6. 使用 npm run dev 运行构建过程。

7. 开始使用 Tailwind 的实用程序类来设计您的内容。

<h1 class="text-3xl font-bold underline">Hello world!</h1>

你学会了吗？