Vite 不基于配置构建顺风

Posted 2023-03-07

【中文标题】Vite 不基于配置构建顺风

【英文标题】：Vite does not build tailwind based on config

【发布时间】：2021-05-23 02:21:37

【问题描述】：

我使用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，任何有效的postcss-load-config 语法都是允许的。 from 和 to seem to be allowed.

当我调用基本上运行vite 的yarn dev 时，我的应用程序启动时没有构建错误，但没有生成顺风输出。

我做错了什么？

【参考方案1】：

from 和 to 不是必需的。

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

【参考方案2】：

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

【参考方案3】：

也许您忘记在顺风配置中填充内容对象

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

【参考方案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],
      ,
    ,
  ,