Custom Css and third party css not bundling in Optimizing Production code

[arpitprod]

I'm using latest version of

Next.js TailwindCSS Semantic-ui-react

I wrote this code in tailwind.config.js file

module.exports = {
    important: true,
    theme: {
        extend: {
            colors: {
                yellowPoints: '#FFC007'
            },
            backgroundSize: {
                'auto': 'auto',
                'cover': 'cover',
                'contain': 'contain',
                '50%': '50%',
                '16': '4rem',
            }
        }
    },
    variants: {},
    plugins: []
}

This code in postcss.config.js file

var tailwindcss = require('tailwindcss');

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

        // https://tailwindcss.com/course/optimizing-for-production/
        require('@fullhuman/postcss-purgecss')({
            content: [
                './src/components/**/*.jsx',
                './pages/*.js',
            ],
            defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
        }),
        require('autoprefixer'),
    ]
}

and this code in index.css file

@tailwind base;
@tailwind components;

/* Albhabet buttons filter */
.btnFilter {
    @apply text-blue-700 text-center bg-gray-400 px-2 py-2 m-1 text-sm font-semibold w-10;
}

/* Albhabet buttons enabled */
.btnEnabled {
    @apply cursor-pointer;
}
.btnEnabled:focus {
    @apply outline-none shadow-outline;
}
.btnEnabled:hover {
    @apply bg-white shadow-outline;
}
.btnEnabled:active {
    @apply bg-gray-500;
}

/* Albhabet buttons disabled */
.btnDisabled {
    @apply opacity-50 cursor-default;
}
.btnDisabled:focus {
    @apply outline-none;
}
.btnDisabled:hover {
    @apply bg-gray-400;
}
.btnDisabled:active {
    @apply bg-gray-400;
}

@tailwind utilities;

I imported these css in _app.js file

// import Semantic UI
import 'semantic-ui-css/semantic.min.css';
import '../index.css';

Everything is working fine without optimizing the code but when optimize code then semantic ui css is not bundling and tailwind config extended theme - backgroundSize classes (.bg-50%, bg-16, .btnFilter, .btnEnabled, .btnDisabled) not bundling but .bg-yellowPoints class bundling

[arpitprod]

394 it's looking same. But please someone give exact solution

[adamwathan]

Classes like btnFilter should be working fine but for bg-50% you'll need to tell Purgecss to consider % characters.

- defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g)
+ defaultExtractor: content => content.match(/[A-Za-z0-9-_:/%]+/g)

If you can publish a GitHub repo that reproduces the issue it will be easier to troubleshoot.

Another thing to consider with Next.js is that their root HTML template is buried in the node_modules directory, and you'll want to scan that as well otherwise you will lose base styles for the html, body, etc. tags.

A simpler approach is just to whitelist the base styles:

/* purgecss start ignore */
@tailwind base;
/* purgecss end ignore */

@tailwind components;

/* Albhabet buttons filter */
.btnFilter {
    @apply text-blue-700 text-center bg-gray-400 px-2 py-2 m-1 text-sm font-semibold w-10;
}

/* Albhabet buttons enabled */
.btnEnabled {
    @apply cursor-pointer;
}
.btnEnabled:focus {
    @apply outline-none shadow-outline;
}
.btnEnabled:hover {
    @apply bg-white shadow-outline;
}
.btnEnabled:active {
    @apply bg-gray-500;
}

/* Albhabet buttons disabled */
.btnDisabled {
    @apply opacity-50 cursor-default;
}
.btnDisabled:focus {
    @apply outline-none;
}
.btnDisabled:hover {
    @apply bg-gray-400;
}
.btnDisabled:active {
    @apply bg-gray-400;
}

@tailwind utilities;

[arpitprod]

thanks @adamwathan this is working now but third party Semantic UI CSS library is not working yet import 'semantic-ui-css/semantic.min.css'; How to fix this issue ?

[arpitprod]

I'm using Popup component in semantic-ui-react. So, I added this code with help of this link in content array in postcss.config.js file and it's working after this 'node_modules/semantic-ui-css/components/popup.js'

var tailwindcss = require('tailwindcss');

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

        // https://tailwindcss.com/course/optimizing-for-production/
        require('@fullhuman/postcss-purgecss')({
            content: [
                './src/components/**/*.jsx',
                './pages/*.jsx',
                'node_modules/semantic-ui-css/components/popup.js',
            ],
            defaultExtractor: content => content.match(/[A-Za-z0-9-_:/%]+/g) || []
        }),
        require('autoprefixer'),
    ]
}

[arpitprod]

Please add this configure in your documents also. It will be very helpful for everyone. thanks again