不使用TailwindCSS配置的postCSS嵌套

Question

我正在尝试调整顺风样式，并且我使用了来自尾风文档的postcss配置：

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'),
 ]
};

类可以正常工作，但嵌套会引发以下错误

检测到嵌套@顺风规则，但不支持。

知道怎样才能让顺风像预期的那样在嵌套中工作吗？

Answer 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)上，则暗模式将无法工作。这可能解释了为什么某些类在使用嵌套时不能工作。