Vite无法根据配置文件构建Tailwind。

Question

我使用 yarn create @vitejs/app my-app --template react-ts 创建了一个新的 react-ts 应用程序。

我使用 yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest 安装了 tailwind。

我初始化了 tailwind：npx tailwindcss init -p。

我在 postcss.config.js 中设置了 from 和 to。

module.exports = {
  from: 'src/styles/App.css',
  to: 'src/styles/output.css',
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

我在src/styles中创建了一个App.css文件：

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

根据https://vitejs.dev/guide/features.html#postcss，任何有效的postcss-load-config语法都是允许的。from和to似乎也被允许。

当我调用yarn dev，实际上运行了vite，我的应用程序启动时没有构建错误，但未生成tailwind输出。

我做错了什么？

- Alexander Zeitler

Answer 1

确保你的 postcss.config.js 文件在应用程序根目录中

- yechale degu

Answer 2

在您的vite.config.js中，确保在插件中包含Tailwind。

plugins: [react(),tailwindcss()],

此外，您可以使用以下方式导入Tailwind。

import tailwindcss from 'tailwindcss';

- Saptarshi Dey

---

我遇到了这个 TypeScript 错误：Type 'Plugin | Processor' is not assignable to type 'PluginOption'. Type 'Plugin' is not assignable to type 'PluginOption'. - postcss v8.4.21，tailwindcss v3.2.7，vite v4.1.0。 - nascente_diskreta

Answer 3

it solved my problem

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  mode: 'jit',
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    // classes that are generated dynamically, e.g. `rounded-${size}` and must
    // be kept
    safeList: [],
    content: [
      './index.html',
      './src/**/*.{vue,js,ts}',
      // etc.
    ],
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
}

- Oğuzhan Filiz

---

这个答案帮了我很多。对于未来的调试者，请确保"content"关键字指向某些文件 :+1: - Jakob Lindskog

Answer 4

from 和 to 不是必需的。

我不得不更新在 main.tsx 中 css 文件的 import 语句，将其指向 src/styles/App.css，这将导致 vite 运行 postcss。

- Alexander Zeitler

---

你能否举个代码示例详细说明一下，我无法想象你是如何实现的。谢谢。 - Theo Oliveira

Answer 5

如果你想在vite中使用tailwindcss，你必须安装postcss autoprefixer。

npm install -D tailwindcss postcss autoprefixer

如果你只使用React，那么请使用：

npm install -D tailwindcss

查看文档，它解决了我的问题。

- Saqif Haque

Answer 6

我认为你需要在文件tailwind.config.js的内容数组中包含你的工具使用的文件扩展名。

我使用VueJs，因为它具有.vue文件扩展名，你需要将它添加到内容中。

例如。

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

- Ervin Sebastian

Answer 7

在我的情况下，当我添加了postcss.config时，vite会抛出一个错误，错误信息为“[ReferenceError] module is not defined in ES module scope”，所以我在package.json中移除了“type”: "module"，然后它开始工作了。

更新：当我按照https://tailwindcss.com/docs/guides/vite中的安装步骤进行操作时，“type”: "module"没有抛出任何错误。

- Harinath Athreyan

Answer 8

如果你正在使用Vite，只需使用以下代码：

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

- Richard Oduro

Answer 9

也许你忘记在Tailwind配置中填写内容对象

module.exports = {
  content: ['./src/*.{js,jsx}', './src/**/*.{js,jsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

- ferdiansyah0611

---

这实际上是对我有用的注释。如果这些内容字符串缺失，Tailwind 将无法正常工作。 - GiantJelly

Answer 10

这是最终的健康解决方案：

点击Tailwind安装指南链接来安装它到你的应用程序然后：

1. 确保以下文件位于你的根目录下
   • postcss.config.js
   • tailwind.config.js
2. 将上述文件中的代码转换为ES6 postcss.config.js文件内容：
   export const plugins = {
tailwindcss: {},
autoprefixer: {}
};

tailwindcss.config.js

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

3. 为每个Tailwind层级在你的主CSS文件中添加@tailwind指令，并确保它在你的入口文件中被引入。
   @tailwind base;
@tailwind components;
@tailwind utilities;

- Adioz Daniel