Вложение TailwindCSS не работает с конфигурацией postCSS

Я пытаюсь определить стили попутного ветра и использую эту конфигурацию postcss из документов Tailwind:

module.exports = {
plugins: {
  'postcss-import': {},
  'tailwindcss/nesting': {},
  tailwindcss: {},
  autoprefixer: {},
 }
}

а вот мой css

.app-wrapper {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

 }

с этой конфигурацией вложение работает нормально, но не все классы tailwindCSS работают должным образом.

но когда я меняю конфиг на следующий

 module.exports = {
 plugins: [
     require('postcss-import'),
     require('tailwindcss/nesting'),
     require('tailwindcss'),
    require('autoprefixer'),
 ]
};

классы работают нормально, но вложение выдает следующую ошибку

Обнаружены вложенные правила @tailwind, но они не поддерживаются.

Любая идея, как я могу заставить попутный ветер работать должным образом с включенным вложением?


249
1

Ответ:

Решено

Если вы хотите добавить родительский селектор для каждой скомпилированной утилиты, добавьте important: '.app-wrapper', в конфигурацию вашего попутного ветра и не оборачивайте директивы @tailwind

// postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;
// tailwind.config.js

module.exports = {
    important: '.app-wrapper',
    // ...
};

Это называется селекторной стратегией. Таким образом, утилита text-red-500 будет скомпилирована как

.app-wrapper .text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity));
}

Обратите внимание: если вы установите darkMode в качестве стратегии класса в своей конфигурации

module.exports = {
    darkMode: 'class',
    important: '.app-wrapper',
    // ...
};

утилита dark:text-white (и любая другая темная утилита) будет скомпилирована как

.app-wrapper .dark .dark\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

Поэтому, если оба класса dark и app-wrapper будут размещены в ОДНОМ элементе (например, html или body), темный режим не будет работать. Это может объяснить, почему некоторые классы не работают при использовании вложенности.