Question

49

How to stop purging tailwind components

rated 0 times [ 56] [ 7] / answers: 1 / hits: 6784 / 5 Years ago, sun, november 10, 2019, 12:00:00

I am using TailwindCSS and Laravel Mix. I am trying to setup PurgeCSS and I have got it reading my template files (working with WordPress) and purge any CSS not within the template files.

However, as part of Tailwind, I am using @apply in my scss files and those utilities I am applying are also being purged which leaves me with a non functioning site.

My sass files are in css/dev and there is an app.scss and then directories with more files within them (base, utilities, custom, components).

My webpack.mix.js file configuration is as follows:

mix.scripts(['js/dev/app.js', 'js/dev/navigation.js', 'js/dev/skip-link-focus-fix.js'],

    'js/build/app.js')

    .sass('css/dev/app.scss', 'css/build')

    .options({

        processCssUrls: false,

        postCss: [tailwindcss('./tailwind.config.js')],

    })

    .purgeCss({

        enabled: mix.inProduction(),

        // Your custom globs are merged with the default globs. If you need to

        // fully replace the globs, use the underlying `paths` option instead.

        globs: [

            path.join(__dirname, 'template-parts/*.php'),

            path.join(__dirname, '*.php'),

            path.join(__dirname, 'css/dev/*.scss'),

            path.join(__dirname, 'css/dev/**/*.scss'),

        ],

        extensions: ['html', 'js', 'php', 'scss', 'css'],

    });

As you can see, I tried setting the paths for purgeCss to look inside the css paths but that has not worked.

Does anyone know how to achieve this?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sonja

Add To Favorites

Follow

Total Points: 541

Total Questions: 113

Total Answers: 114

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

sonja questions

1 Filtering table data for multiple columns Angular 10

Mon, Nov 30, 20, 00:00, 4 Years ago

1 Auto clear cache from browser

Sun, Oct 11, 20, 00:00, 4 Years ago

1 react-table has a issue with rendering in next.js

Thu, May 21, 20, 00:00, 4 Years ago

1 JS - String includes a substring that matches regex

Mon, Aug 26, 19, 00:00, 5 Years ago

1 How to append Json String to another Json String in javascript

Tue, Aug 20, 19, 00:00, 5 Years ago

View All

answered 5 Years ago dominiquezachariahh · Accepted Answer

The issue was with WordPress classes not being included in the template files and then being purged. The solution was switching to using UnCSS which allowed me to setup URLS for UnCSS to visit and it won't purge any classes used on those pages. I also included some standard WordPress classes which I found a list of online.

My final config is:

const uncss = require('postcss-uncss');



mix.js('js/dev/app.js', 'js/build/app.js')

    .sass('css/dev/app.scss', 'css/build')

    .options({

        processCssUrls: false,

        postCss: [

            tailwindcss('./tailwind.config.js'),

            ...process.env.NODE_ENV === 'production' ? [uncss({

                html: [

                    './*.php',

                    './template-parts/*.php',

                    'https://www.example.com',

                    'https://www.example.com/work/',

                    'https://www.example.com/work/example-project/',

                    'https://www.example.com/contact/',

                    'https://www.example.com/blog/',

                    'https://www.example.com/blog/laravel-php-framework/',

                ],

                ignore: [

                    '.rtl',

                    '.home',

                    '.blog',

                    '.archive',

                    '.date',

                    '.error404',

                    '.logged-in',

                    '.admin-bar',

                    '.no-customize-support',

                    '.custom-background',

                    '.wp-custom-logo',

                    '.alignnone',

                    '.alignright',

                    '.alignleft',

                    '.wp-caption',

                    '.wp-caption-text',

                    '.screen-reader-text',

                    '.comment-list',

                    '.grecaptcha-badge',

                    /^search(-.*)?$/,

                    /^(.*)-template(-.*)?$/,

                    /^(.*)?-?single(-.*)?$/,

                    /^postid-(.*)?$/,

                    /^attachmentid-(.*)?$/,

                    /^attachment(-.*)?$/,

                    /^page(-.*)?$/,

                    /^(post-type-)?archive(-.*)?$/,

                    /^author(-.*)?$/,

                    /^category(-.*)?$/,

                    /^tag(-.*)?$/,

                    /^tax-(.*)?$/,

                    /^term-(.*)?$/,

                    /^(.*)?-?paged(-.*)?$/,

                    '.animate',

                    '.animated',

                    '.bounce',

                    '.fadeInDown',

                    '.fadeIn',

                    '.fadeInUp',

                    '.jackInTheBox',

                ]

            })] : [],

        ]

    });

I also made use of the UnCSS exclude from purge CSS comments:

/* uncss:ignore start */



my css goes here



/* uncss:ignore end */

I ended up using this on all my custom sass files except for the tailwind files so that the only selectors that are purged are tailwind utilities, which saved me about 300 KB.