Блог

В настоящее время я пытаюсь использовать класс CSS-модулей и возможности вложенности PostCSS вместе в одном файле с TailwindCSS. Но когда я делаю что-то подобное в моем Sidebar.module.css :

 .sidebar {
    @apply fixed top-0 left-0 h-full w-64;
    amp;.closed {
     @apply w-20;
    }
} 
 

Chrome, похоже, не распознается, и это предупреждение появляется в инспекторе:
Предупреждение с указанием неизвестного имени свойства

Поэтому я не уверен, что это вообще возможно. Вот мой postcss.config.js

 module.exports = {
  plugins: [
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}
 

Если вы хотите использовать импорт CSS в стиле модуля, следуйте этому документу и, пожалуйста, проверьте настройки своего приложения.

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

Это руководство и использование следующей postcss.config.js настройки сработали для меня.

 module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    'postcss-nesting': {},
    tailwindcss: {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3,
      features: {
        'custom-properties': false,
        'nesting-rules': true
      }
    }
  }
}