Tailwindcss: Built-in purgecss remove all plugin classes

[resasia]

I use tailwind-dir for RTL designs. when i generate production file, all rtl: and ltr: styles that generated by the plugin are purged.

Note: I am using tailwindcss 1.4.6, and my tailwind.config.js is:

 module.exports = {
  theme: {
    inset: {
      '0': 0,
      auto: 'auto',
    '1/2': '50%',
    '1/4': '25%',
    '1/8': '12.5%'
    },
    fontFamily: {
      'custom': ['Roboto Condensed', 'Noto Kufi Arabic', 'sans-serif'],
    },
    fontSize: {
      'xs': '.75rem',
      'sm': '.875rem',
      'tiny': '.875rem',
      'base': '1rem',
      'lg': '1.125rem',
      'xl': '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
    },
    extend: {
      width: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      height: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      }
    }
  },
  variants: {
    float: ['responsive', 'direction'],
    margin: ['responsive', 'direction'],
    padding: ['responsive', 'direction'],
    fontSize: ['responsive', 'direction'],
    order: ['responsive', 'direction'],
    alignItems: ['responsive', 'direction'],
    lineHeight: ['responsive', 'direction'],
    order: ['responsive', 'direction'],
  },
  plugins: [
    require('tailwindcss-dir')(),
  ],

  purge: {
    content: ['**/*.php', 'src/app.js'],
    options: {
      whitelist: ['home'],
    }
  }
}

[estevanmaito]

How are you using those classes inside your code (could you share a small snippet)?

In the mean time, this is a common problem stated in the docs https://tailwindcss.com/docs/controlling-file-size/#writing-purgeable-html

This won't work

<div :class="text-{{ error ? 'red' : 'green' }}-600"></div>

This will work

<div :class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

[resasia]

@estevanmaito thanks for your comment. I do not have dynamic classes, this is an example of what i have:

<h2 class="ltr:text-3xl rtl:text-2xl text-gray-500"></h2>

[estevanmaito]

Try changing the path to your content inside purge (and make sure your code is actually inside these folders):

From this

content: ['**/*.php', 'src/app.js'],

To this

content: ['./**/*.php', './src/app.js'],

[adamwathan]

Can you provide a GitHub project that reproduces the issue so I have something to troubleshoot? Thanks.

[jorditarrida]

Hi all,

Since I encountered the same issue, I tried creating a repo which reproduces the issue, only to find out I cannot reproduce it. The repo is here: https://github.com/jorditarrida/tailwind-dir-test

This is a slightly different environment that the one giving me problems. The demo repo is a Parcel bundle with static HTML files, while the problematic environment is a Sage WP theme (Webpack, Blade templates…). Everything else works correctly on the Sage environment and the purge paths are set up properly. However, the problem is the same as reported on this environment: all rtl: and ltr: prefixed classes are removed.

At some point I suspected it was related to the selectors used by the tailwind-dir plugin, since they feature the [dir] attribute selector, and this wouldn't be present on a WP theme template part. However, on the demo repo, no dir attribute is present in the HTML, and purging works as expected.

As an example, the plugin generated class rtl:mt-4 would have the following selector: [dir='rtl'] .rtl\:ml-4, [dir='rtl'].rtl\:ml-4. Just to confirm, this selector is kept in the demo repo project (Parcel based), but purged on the Sage WP theme (Webpack + Blade based).

So… I'm not sure this is a very useful message, but I can confirm I have the same issue on some environments. It'd be great if someone could help fix this :)

[adamwathan]

Can you create a Sage project that reproduces the issue?

[jorditarrida]

I created a blank Sage project and installed tailwind-dir, reproduced the same example as in the other test repo… and it works as expected (used classes are not removed by purge). The repo is here: https://github.com/jorditarrida/tailwind-dir-sage-test. The example is on the homepage for sites with the homepage set as a static page.

Still, in the original project I've found no way to fix it. The most radical thing approach has been manually updating the yarn.lock file with the same versions as in the freshly installed project and reinstalled the dependencies… to no effect. On the original project, the rtl: and ltr: are still being removed by the purge option. I cannot find any significant difference in the usage (I even put the code inside a partial in the new project just in case…), except for other Tailwind plugins being used on the original project (which are working).

Would you care to take a look at the original project? I would need to share it privately though.

[adamwathan]

Sure send me an invite and I can take a look 👍🏻

[adamwathan]

Closing this since it sounds like a project specific issue. Happy to reopen if someone can provide a generic reproduction.

[jorditarrida]

Hi @adamwathan, thanks for your help. I invited you to a private repo. You can find the rtl: prefixed classes in files such as resources/views/partials/guides/audio.blade.php or resources/views/partials/guides/credits.blade.php. The reproduction steps should be installing dependencies (I used Yarn) and building for production, and no rtl: prefixed classes will appear on the compiled CSS. Thanks for your help :)

[adamwathan]

Sent you a PR that fixes your problem. Here's the message I included for anyone else who runs into this issue:

It looks like this was a combination of two things:

1. That cache-loader plugin or whatever it was was making the builds indeterminate, I was getting stale builds all the time for unknown reasons. Disabling all that made the builds predictable. You might be able to reintroduce it I dunno, maybe you have a better understanding of how it works than I do.

2. PurgeCSS was removing the rtl styles because there was no dir="rtl" present in any of the templates. Adding ['dir', 'rtl'] to the whitelist fixes this without resulting in any over-bundling or anything, it still strips out the rtl styles you're not actually using.

The general solution was to add this to the purge section of the Tailwind config:

module.exports = {
  purge: {
    content: [
      // Your template paths...
    ],
    options: {
      whitelist: ['dir', 'rtl'],
    },
  },
  // ...
}

[jorditarrida]

Hi @adamwathan, thank you very much for your help. I could test the issue and it seems to work properly when whitelisting dir and rtl while still stripping out unused styles. This now works in my project even with the cache-loader enabled. I still don't understand why it would work in the sample Sage project I created without whitelisting, but I'm satisifed for now as I got the results I expected. Thanks again!

[adamwathan]

@jorditarrida It works sort of by chance in your sample project because here you are including your scripts in Purge's content paths:

https://github.com/jorditarrida/tailwind-dir-sage-test/blob/master/resources/assets/styles/tailwind.config.js#L6

And this script contains the strings dir and rtl which effectively act as if you have safelisted both of those strings:

https://github.com/jorditarrida/tailwind-dir-sage-test/blob/master/resources/assets/scripts/routes/common.js#L5

If you removed that JS file you'd probably see things stop working in this project too 👍