NextJS：TailwindCSS 在生产中不起作用

Question

I'm using NextJS, TailwindCSS and Typescript. When running in development, everything works as expected, but when running in production, no tailwindcss classes are applied. Here is a link to the repo: https://github.com/Capsule-app/next .

Answer 1

This problems occurred because of Purge. Please check the official page

Few possible way to fixed this issues. Option A (Quick & Dirty Plus Lazy): In tailwind.config.js file try purge: false

Option B: If you are using purge: ["./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,ts,jsx,tsx}"], Or If you have custom css class or third-party lib class then follow Safelisting with `install @fullhuman/postcss-purgecss first then try

// 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: ['./src/components/**/*.jsx', './src/pages/**/*.js'],
                 defaultExtractor: content =>
                    content.match(/[\w-/:]+(?<!:)/g) || [],
              },
           }
         : {}),
   },
}`

Note: Each solution depend on it's context. I request to you read official docs carefully.