Tailwind styles broken in production

https://v1.tailwindcss.com/docs/grid-template-columns#purge-css-options

Level 18

This is caused because purgeCss can't guess what those 2 classes will be ( col-start-x and col-span-x) so it purges it.

You either need to write it differently or make an exception in your config file to whitelist all your grid classes.

Level 12

Thank you. I now know why it doesn't work. How do I whitelist all grid classes?

Friso S

https://purgecss.com/safelisting.html#patterns

Level 1

Based upon which of purgecss version you got, you can safelist or whitelist something.

You could add this in the tailwind config.

I used it like this:

  .purgeCss({
        enabled: false,
        whitelist: ['agile'],
        whitelistPatterns: [/^agile?.*/],
    }).version();

but this was done with sass, and not tailwind.

Level 12

Tried this

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    purge: ['./resources/views/**/*.blade.php'],
    safelist: { greedy: ['/col-start-$/', '/col-span-$/']},
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },
  variants: {},
  plugins: [
      require('@tailwindcss/ui'),
  ],
}

doesn't work.

Level 12

I'm on tailwindcss v 2.0.3

Also tried

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    purge: {
        content: ['./resources/views/**/*.blade.php'],
        options: {
            safelist: {
                greedy: ['/col-/']
            },
        }
    },
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },
  variants: {},
  plugins: [
      require('@tailwindcss/ui'),
  ],
}

This gave this error.

/var/www/html/node_modules/tailwindcss/node_modules/purgecss/lib/purgecss.js:1
(function (exports, require, module, __filename, __dirname) { "use ..........

Level 12

Did a dirty workaround by inserting

@if(! true)
                <div class="col-start-1 col-start-2 col-start-3 col-start-4 col-start-5 col-start-6 col-start-7 col-span-1 col-span-2 col-span-3 col-span-4 col-span-5 col-span-6 col-span-7"></div>
            @endif

before

<ul class="col-start-{{$start}} col-span-{{$end-($start-1)}} bg-white rounded-lg shadow">

Would still like to know how to properly use safelist with Laravel.

Level 18

Hey ,

you could try with

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
    purge: {
        content: ['./resources/views/**/*.blade.php'],
        options: {
           safelist: {
                  standard: [
						/^col-start-/,
						/^col-span-/
				]
            }
        }
    },
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
            },
        },
    },
  variants: {},
  plugins: [
      require('@tailwindcss/ui'),
  ],
}

Level 12

No this didn't work either. Would love to know how to safelist / whitelist for future reference.

Level 12

A regex pattern that would catch col-start-3 and col-span-2 would be

col-[a-z]*-\d

but inserting this as the pattern also doesn't work.

Level 18

I tried on an empty laravel app with these and it works perfectly :

options: {
    safelist: {
        standard: [
            /^col-start-/,
            /^col-span-/
        ]
    }
}

note that it doesn't seem to work when there is a breakpoint such as "sm:col-start-*" I wonder if you have to specify those as well.

Best Answer

Level 18

After further tinkering with regex, I found a way to get every variants of col-start & col-span

options: {
    safelist: {
        standard: [
                    /^[\w:]*col-start-/,
                    /^[\w:]*col-span-/
        ]
    }
}

1 like