Vite 不会根据配置构建 tailwind

Question

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

我使用 yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest 安装了 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, any valid postcss-load-config syntax is allowed. from and to seem to be allowed.

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

我做错了什么？

Answer 1

from 和 to 不是必需的。

我必须更新 main.tsx 中 css 文件的 import 语句以指向 src/styles/App.css，这将导致 vite 变为运行 postcss.

Answer 2

确保您的 postcss.config.js 文件位于您的应用程序根目录中

Answer 3

也许您忘记在 tailwind 配置中填写内容对象

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

Answer 4

它解决了我的问题

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],
      },
    },
  },
}

Answer 5

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

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

此外，您可以使用以下命令导入 Tailwind。

import tailwindcss from 'tailwindcss';

Vite 不会根据配置构建 tailwind

Vite does not build tailwind based on config

tailwind-css

postcss

vite