如何在没有 require() 的情况下使用带有 postcss.config.js 的 Tailwind 嵌套声明

Question

我正在尝试在 Tailwind 中使用嵌套声明，因此，在他们的 docs 中，他们使用来自 CommonJS 的 require() 显示 postcss.config.js：

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

我需要相同的行为，但在另一种格式中，不是，使用require()格式，例如：

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Answer 1

您需要通过 npm/yarn 安装 postcss-import，然后将 postcss.config.js 更改为：

module.exports = {
    plugins: {
        'postcss-import': {},
        'tailwindcss/nesting': {},
        tailwindcss: {},
        autoprefixer: {},
    }
}

此外：当您使用 tailwindcss 转译您的 CSS 时，确保您启用了 --postcss 标志。

如何在没有 require() 的情况下使用带有 postcss.config.js 的 Tailwind 嵌套声明

How to use Tailwind Nested Declarations with postcss.config.js without require()

postcss

tailwind-css