Vite 无法构建 Tailwind CSS。

Question

我使用 npm install -D tailwindcss postcss autoprefixer vite 安装了 Tailwind 和其他工具。

我使用 npx tailwindcss init -p 创建了 Tailwind 和 PostCSS 的配置文件。

tailwind.config.js 包含以下内容：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js 包含以下内容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

我的CSS文件存在于css\tailwind.css中，包含以下内容：

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

CSS文件通过 <link href="/css/tailwind.css" rel="stylesheet" > 语句链接到我的HTML页面中。

运行vite时，我的应用程序启动而不会出现构建错误，但tailwind输出未生成。

- Abdullah Al-Shameri

---

你是否真正使用过任何HTML类？同时，您还需要配置“content”属性以告诉Tailwind在哪里查找具有类的文件。 - Danila

Answer 1

这对我有效。一旦您按照Tailwindcss文档完成操作，您需要在vite.config.js 中导入tailwindcss（我尝试了JavaScript文件，不确定是否适用于TypeScript）：

import tailwindcss from 'tailwindcss'

然后像这样将tailwindcss添加为PostCSS插件：

css: {
  postcss: {
    plugins: [tailwindcss],
  },
}

一旦完成上述步骤，你的 vite.config.js 将会变成这样：

/*Other imports*/
import tailwindcss from 'tailwindcss'

export default defineConfig({
  plugins: [],
  resolve: {
    /*something*/
  },
  css: {
    postcss: {
      plugins: [tailwindcss],
    },
  },
});

- RT -Jeo-

---

对我有用，谢谢。Vite Vue.js 项目。 - water_ak47

非常感谢。找了两天终于找到了这个答案，而且效果非常好。在使用vite的后端集成功能时，需要在vite.config.js文件中将css.postcss.plugins属性设置为tailwindcss。 - Ishan

谢谢，这个帮了我大忙！在你的vite.config.js示例中，可能有必要在顶部加上import { defineConfig } from 'vite'，这样会更有用 :-) - undefined

Answer 2

你需要调整一些设置，感觉你已经很接近了。

1. 编辑 Tailwind.config.js 文件

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. 使用 'npm run dev' 命令启动 Vite 构建脚本。

// Open terminal
npm run dev

3. （可选）将演示的h1属性复制到您的索引文件中并测试

<h1 class="text-3xl text-blue-700">Testing</h1>

- Joshua Mitchener

---

看起来问题的提出者已经完成了所有这些事情。 - Nikita

@Nikita，他没有告诉Tailwind在哪里查找要包含的类名称（请参见“content: [// add your sources here]”列表）。 - Jannie Theunissen