Vite не строит попутный ветер на основе конфигурации

Question

Я создал новый react-ts приложение, использующее yarn create @vitejs/app my-app --template react-ts.

Я установил попутный ветер с помощью yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest.

Я инициализировал попутный ветер: npx tailwindcss init -p.

Я установил и в 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 dev который по сути работает vite, мое приложение запускается без ошибок сборки, но попутный ветер не генерируется.

Что я делаю не так?

Answer 1

убедитесь, что ваш файл postcss.config.js находится в корневом каталоге вашего приложения

Answer 2

В своем vite.config.js обязательно включите Tailwind в свои плагины.

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

Кроме того, вы можете импортировать Tailwind со следующим.

      import tailwindcss from 'tailwindcss';

Answer 3

Вам нужно установить автопрефиксер postcss, если вы хотите использовать tailwindcss с vite.

      *npm install -D tailwindcss postcss autoprefixer*

если вы используете только реакцию, используйте

      *npm install -D tailwindcss*

проверьте документы, это решило мою проблему.

Answer 4

from и to не требуются.

Мне пришлось обновить свой import инструкция для файла css в main.tsx указать на src/styles/App.css что вызовет vite бежать postcss.

Answer 5

это решило мою проблему

хвостовой ветер.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 6

ЭТО ПОЛНОСТЬЮ ПОЛЕЗНОЕ РЕШЕНИЕ:

Перейдите по этой ссылке. Руководство по установке попутного ветра , чтобы установить приложение, а затем:

1. Убедитесь, что следующие файлы строк находятся в вашей корневой папке.
   • postcss.config.js
   • хвостовой ветер.config.js
2. преобразуйте код в приведенных выше файлах в содержимое файла ES6postcss.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 для каждого слоя Tailwind в основной файл CSS и убедитесь, что они импортированы в ваш входной файл.
   @tailwind base;
@tailwind components;
@tailwind utilities;

Answer 7

В моем случае, когда я добавил postcss.config, выдается ошибка, содержащая сообщение[ReferenceError] module is not defined in ES module scopeпоэтому я удалил package.json, и он начал работать

Обновление: - когда я выполнил шаги установки с https://tailwindcss.com/docs/guides/vite . "type": "module"не выдал ни одной ошибки

Answer 8

Возможно, вы забыли заполнить объект контента в конфигурации попутного ветра.