I’ve been struggling with this for some hours now, I hope would have some pointers.
I have some tailwind classes that are being generated dynamically in the blade templates. Like p-4 orgap-0 where the size is dynamic. When I run yarn start or yarn build the js and css are huge. Well over 10mb. And when I run yarn build:production the size is down to under 1mb. Nice, but I get the feeling the build purged too much of the sass.
Now, I get the feeling that is because it doesn’t find a class to keep because it’s being generated in a php var before it’s passed to an html element as a class.
Is there a way to fix this? I’ve read about the savelist in tailwinds purge option. But I really cannot add ALL the dynamically generatable options, those can be hundreds.
The short version is that dynamically generating parts of classes is going to break tailwind’s purging because it can’t understand them–doing static analysis on PHP code is way beyond the remit of that tool.
If you must have dynamic classes, then the way to make them purgable is to dynamically output entire classes, rather than parts of classes.
// This won't work
<div class="gap-{{ $gap }}">
// This will work
<div class="@if( $gap = 4 ) gap-4 @else gap-2 @endif">
Thanks Ben, I figured as much. That’s a bummer. That would mean I would have to write hundreds of if/else statements, hardcoded just to make the purge work.
<div class="
@if( $gap = 0 ) gap-0
@elseif( $gap = 1 ) gap-1
@elseif( $gap = 2 ) gap-2
// all the way to 32
@endif">
And then moving on to padding with p-0pt-0pr-0, you catch my drift
I’m sorry, I don’t mean to be snarky, this feels the opposite of the idea of coding.
Even being able to whitelist it with regex would need quite some memory muscle to keep that up to date.
Moving on the the acceptance phase:
So, I’ve read that in tailwind.config.js you cannot work with regex. But I read somewhere that using purgecss you can set patterns with regex. But I would need some help or pointers how to set it with Sage 10. I believe it needs to go in webpack.mix.js. But from there I cannot find pointers to get that running
So, I’ve read that in tailwind.config.js you cannot work with regex.
Where did you read this?
If you want to configure Tailwind, you do that in tailwind.config.js. If you need to customize purgecss, you can pass options to it directly: Optimizing for Production - Tailwind CSS
If I was in this situation I would rethink why my blade templates need this extreme level of flexibility. IMO templates should usually allow for a limited, controlled set of options–otherwise they become much more difficult to manage, test, etc.
I’m now unable to find back the documentation. This was noted in the known issues. But I now get the feeling this might have been in an older version. Because it was called whitelist instead of safelist. This would also explain why I did not get a literal class name to work, like p-4.
Tailwind 2 does support regex. This is a quick test I got to work. Later on I’ll try to limit the included classes more, by using regex to limit the sizes up to 12, like p-12.
