Как использовать вложенные объявления попутного ветра с postcss.config.js без необходимости()

#tailwind-css #postcss

Вопрос:

Я пытаюсь использовать вложенные объявления в Tailwind, поэтому в своих документах они показывают postcss.config.js использование require() из CommonJS:

 // 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:

Вам нужно установить postcss-import через npm/yarn, а затем изменить свой postcss.config.js на:

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

Также: При использовании tailwindcss для транспиляции CSS убедитесь, что у вас --postcss включен флаг.