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

Posted 2023-03-07

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

【英文标题】：How to use Tailwind Nested Declarations with postcss.config.js without require()

【发布时间】：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: ,
  

【参考方案1】：

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

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

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