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