Add PurgeCSS to optimise file size on production

Hi GiorgosK,

I agree that it would be good to reduce the size of the generated CSS if possible. I'm familiar with PurgeCSS and have used it on a few non-Drupal Tailwind projects.

The issue though with PurgeCSS from the perspective of using it with Drupal, is that not all classes are included in a theme's templates. They could be added via hooks in a theme's *.theme file, as part of a template in a parent theme, or as part of a module.

If PurgeCSS were to be added and was executed against only the theme's templates directory, there's a chance that wanted classes could be removed inadvertently.

I'll give this some thought, though I think that it may be something to add to the theme's documentation for people to reference and implement on their own, rather than adding it to the default starter kit.

I've set up a repo at https://github.com/opdavies/drupal-tailwindcss-purgecss-test where I'm doing some experimentation and testing.

Currently running yarn production with PurgeCSS enabled seems to revert the base preflight styles.

@opdavies - it looks like https://www.drupal.org/project/tailwindcss/issues/3038830 updated tailwind to v.1.x (v.1.x was released last week I think?). In 1.x, preflight was renamed to base, among other utility name changes. https://tailwindcss.com/docs/upgrading-to-v1

Not sure if that's the issue in #5 or not, but just in case.

Hi @occupant,

Yes, you're correct, though I'm using @tailwind base; already within the Drupal code at https://git.drupalcode.org/project/tailwindcss/blob/8.x-2.x/src/main.css and within the test repo at https://github.com/opdavies/drupal-tailwindcss-purgecss-test/blob/master....

Hi @opdavies,

Ok, that's good. I've been testing the patch as well and it seems to be running ok for me. My styles are being output fine running yarn production (using the same command as here.

Some thoughts re: #3. Classes can indeed be added via module, parent theme or theme function in .theme, but the CSS in the first two should also be provided by those if it's required - otherwise, how could it use it reliably for styling? Unless you're thinking of using another modules' selectors as styling hooks? In that case, that would be an issue.

Edit: on second thought, it's obvious that's what you meant.

That said, I can think of two possible ways you could alleviate the problem:

• /* purgecss ignore */ link
• Defining a second library / css file that contains 'safe' css.

Since purgecss knowledge is already required when using purgecss, the first option seems preferable to me. I've tried it out and it's working fine in my tests.

Cheers

Closing. Anything further will be done in #3186157: Use Tailwind's built-in Purge settings or a future issue.