TailwindCSS 嵌套不适用于 postCSS 配置

Question

我正在尝试 scope tailwind styles 我正在使用 Tailwind 文档中的这个 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'),
 ]
};

这些类工作正常但嵌套抛出以下错误

检测到嵌套的@tailwind 规则，但不受支持。

知道如何在启用嵌套的情况下让顺风按预期工作吗？

Answer 1

如果您希望为每个已编译的实用程序添加父选择器，请将important: '.app-wrapper',添加到您的 tailwind 配置中并且不要包装@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 设置为 class 策略

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

utility dark:text-white （以及所有其他 dark 实用程序）将被编译为

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

因此，如果将dark和app-wrapper类都放在同一个元素上（例如html或body ），暗模式将不起作用。 这可以解释为什么某些类在使用嵌套时不起作用