0

我react-ts使用yarn create @vitejs/app my-app --template react-ts.

我使用yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest.

我初始化了顺风：npx tailwindcss init -p.

我设置from并to在postcss.config.js：

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

我在以下位置创建了一个App.css文件src/styles：

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

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

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

我究竟做错了什么？

4

4 回答 4

1

它解决了我的问题

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],
      },
    },
  },
}
于 2022-01-31T08:22:36.600 回答
0

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

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

于 2021-12-17T12:59:50.210 回答
-1

from并且to不是必需的。

我必须更新我import对 css 文件的声明，main.tsx以指向src/styles/App.css哪个将导致vite运行postcss.

于 2021-02-20T06:34:57.657 回答
-1

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

于 2021-03-07T00:10:37.343 回答