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

【问题标题】：How to use Tailwind Nested Declarations with postcss.config.js without require()如何在没有 require() 的情况下使用带有 postcss.config.js 的 Tailwind 嵌套声明
【发布时间】：2021-10-24 18:28:09
【问题描述】：

我正在尝试在 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: {},
  }
}

【问题讨论】：

标签： tailwind-css postcss

【解决方案1】：

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

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

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

【讨论】：