Support for Tailwind

[kcubero27]

Description When installing TailwindCSS and next-purgecss, some styles got removed because they are not classes. By default, TailwindCSS adds classes for span and other similar HTML tags without a class.

Expected outcome If I have a span in my page, next-purgecss should not remove styles that affect this span. However, it should be intelligent enough in order to remove styles that affect paragraphs or headers.

Idea Currently, Gatsby has a plugin called gatsby-plugin-purgecss which has a special option called tailwind:

{ 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // Print removed selectors and processed file names
        // develop: true, // Enable while using `gatsby develop`
        // tailwind: true, // Enable tailwindcss support
        // whitelist: ['whitelist'], // Don't remove this selector
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
      }
    }

Demo: NextJS and Gastby

[kcubero27]

I would love to know if there is the opportunity to contribute to this task. In the same way, I would like you to give me some guidelines to do so 👍

[lucleray]

Hey @karencubero , a contribution to add this parameter would be more than welcome. It would actually be awesome. I would love to add an example with tailwindcss in this repo ❤

[kcubero27]

I've tried to add extractors but seems that doesn't work:

[
      {
        extractor: class {
          static extract(content) {
            return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
          }
        },
        extensions: ['js', 'ts', 'jsx', 'tsx']
      },
      ...extractors
    ];

I have as well tried to implement it without next-css (using PostCSS) but doesn't work either: https://tailwindcss.com/docs/controlling-file-size/

Any ideas?

[stefanbuck]

I was facing the same issue and found a workaround by using ignore comments

/* purgecss start ignore */
@tailwind base;
/* purgecss end ignore */

[kcubero27]

I wasn't contemplating that solution, but at least is a fix and it will work. Thanks! @stefanbuck

[knguyen0125]

In this file (gatsby-node.js) of gatsby-plugin-purgecss, the plugin included a whitelist option for PurgeCSS of ['html', 'body']. This seems to also solve the problem. But then again, Tailwind base is essentially Normalize.css which is tiny, so ignoring it with @stefanbuck is probably safer.

[timneutkens]

Example of Next.js + Tailwind with purgecss here: https://github.com/zeit/next.js/blob/canary/examples/with-tailwindcss/postcss.config.js

[kcubero27]

I guess this task can be closed! Thanks @timneutkens