Вложение 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, но они не поддерживаются.

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

Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...
LeetCode запись решения 2536. Увеличение подматриц на единицу
LeetCode запись решения 2536. Увеличение подматриц на единицу
Увеличение подматриц на единицу - LeetCode
Переключение светлых/темных тем
Переключение светлых/темных тем
В Microsoft Training - Guided Project - Build a simple website with web pages, CSS files and JavaScript files, мы объясняем, как CSS можно...
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel с методами присоединения и отсоединения
Отношения "многие ко многим" в Laravel могут быть немного сложными, но с помощью Eloquent ORM и его моделей мы можем сделать это с легкостью. В этой...
В PHP
В PHP
В большой кодовой базе с множеством различных компонентов классы, функции и константы могут иметь одинаковые имена. Это может привести к путанице и...
Карта дорог Беладжар PHP Laravel
Карта дорог Беладжар PHP Laravel
Laravel - это PHP-фреймворк, разработанный для облегчения разработки веб-приложений. Laravel предоставляет различные функции, упрощающие разработку...
0
0
249
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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), темный режим не будет работать. Это может объяснить, почему некоторые классы не работают при использовании вложенности.

Другие вопросы по теме