[NextJs / TailwindCSS]: css классы отсутствуют в производстве - PullRequest
Новая
       32

[NextJs / TailwindCSS]: css классы отсутствуют в производстве

0 голосов
/ 20 апреля 2020

Версия для попутного ветра: v9.3.5

Пост CSS Конфиг: 

// postcss.config.js

module.exports = {
   plugins: {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production'
         ? {
              '@fullhuman/postcss-purgecss': {
                 content: ['./components/**/*.js', './pages/**/*.js'],
                 defaultExtractor: content =>
                    content.match(/[\w-/:]+(?<!:)/g) || [],
              },
           }
         : {}),
   },
}

Конфигурация попутного ветра: 

// tailwind.config.js

module.exports = {
   theme: {
      extend: {
         colors: {
            tint: 'rgba(0,0,0,0.3)',
         },
      },
   },
   variants: {},
   plugins: [],
}

Стили отлично работают в разработке, но в производстве только немного стиля работает. После проверки файла CSS в папке сборки создается впечатление, что некоторые классы CSS не извлекаются и, возможно, не удаляются, что приводит к частичной стилизации приложения.

1 Ответ

0 голосов
/ 24 апреля 2020

Обнаружена проблема, postcss в конфигурации отсутствовала папка разделов в массиве содержимого, а также, поскольку в моих js файлах было jsx, мне нужно добавить и это. 

// postcss.config.js

module.exports = {
   plugins: {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production'
         ? {
              '@fullhuman/postcss-purgecss': {
                 // added sections folder and changed extension to jsx
                 content: ['./components/**/*.jsx', './pages/**/*.js', './sections/**/**/*.jsx'],
                 defaultExtractor: content =>
                    content.match(/[\w-/:]+(?<!:)/g) || [],
              },
           }
         : {}),
   },
}
...