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