tailwind-css - 如何在没有 require() 的情况下将 Tailwind 嵌套声明与 postcss.config.js 一起使用

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 标志。