Vue+element+Vite安装 Tailwind CSS

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

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

   npm init vue@latest

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

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

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

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

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

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

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

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

   import "./style/tailwind.css";

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

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

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

你学会了吗？