Integrate PurgeCSS directly into Tailwind #1639

adamwathan · 2020-04-28T01:46:01Z

This PR adds a new purge config option for purging unused CSS directly from within Tailwind instead of having to pull in and configure PurgeCSS manually.

The API is much more opinionated and slimmed down by default, optimizing for the 95% use case:

// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.html',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

The purge option accepts an array of filenames/globs to scan for classes, and that's it. This should be enough for most people, but if you are one of those people who just can't help themselves and has to fiddle with everything, you can fine-tune the configuration however you like (keep reading for more on that).

Things to note:

This option is only enabled when NODE_ENV is production. If you want to enable it explicitly based on some other conditional logic, you can use an object syntax and the enabled property, and specify your templates using the content property:
```
// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.html'],
  },
  // ...
}
```
Only components and utilities are purged by default. Our base styles are not purged, and no custom CSS authored in your CSS files is purged, including any imports to outside libraries.

This is to make sure you don't accidentally run into common pitfalls, like forgetting to scan your root HTML template (which is difficult with frameworks like Next.js since it is buried in node_modules) or accidentally purging styles that come from whatever datepicker library you've pulled in as an npm dependency.

This means we are not purging absolutely everything that could be safely purged, but you get 99% of the benefit with much less manual tuning. You will basically never need to whitelist anything using this approach.

Essentially we make your CSS file look like this:
```
/* purgecss start ignore */
@tailwind base;

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

.btn {
  @apply bg-blue-500 px-4 py-2 text-white;
}

.alert {
  @apply border p-4 rounded;
}

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

.custom-utility {
  foo: bar;
}
/* purgecss end ignore */
```
If you really want to purge everything, you can do so using mode: 'all':
```
// tailwind.config.js
module.exports = {
  purge: {
    mode: 'all',
    content: ['./src/**/*.html'],
  },
  // ...
}
```
You're much more likely to accidentally remove important styles if you do this but I'm not the cops — if it tickles your pickle go for it.

We are using a new extractor strategy that tries to be as permissive as possible.

Here is the new extractor we're using:

defaultExtractor: content => {
  // Capture as liberally as possible, including things like `h-(screen-1.5)`
  const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

  // Capture classes within other delimiters like .block(class="w-1/2") in Pug
  const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

  return broadMatches.concat(innerMatches)
}

...and here is the sample HTML we test our purging against:

<!-- Basic HTML -->
<div class="bg-red-500 md:bg-blue-300 w-1/2"></div>

<!-- Vue dynamic classes -->
<span :class="{ block: enabled, 'md:flow-root': !enabled }"></span>

<!-- JSX with template strings -->
<script>
  function Component() {
    return <div class={`h-screen`}></div>
  }
</script>

<!-- Custom classes with really weird characters -->
<div class="min-h-(screen-4) bg-black! font-%#$@ w-(1/2+8)"></div>

<!-- Pug -->
span.inline-grid.grid-cols-3(class="px-1.5")
  .col-span-2
    Hello
  .col-span-1.text-center
    World!

It works really well and I would be pretty surprised if you ever needed to customize this.

If you want more control than what we offer, you can pass any options you want directly to PurgeCSS using the options property:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.html'],

    // These options are passed through directly to PurgeCSS
    options: {
      whitelist: ['bg-red-500', 'px-4'],
    }
  },
  // ...
}

Any options passed to PurgeCSS will override our own options, so for example if you pass content it will override our content property at the top-level.

Happy purging 🤮

MrJmpl3 · 2020-04-28T02:04:53Z

Please, don't forget add a example with prefix 😄

utkarshkukreti · 2020-04-28T02:05:15Z

Right now this won't work with Pug templates because we are allowing . characters in class names (Tailwind UI has classes like ml-0.5 for example). This is unfortunate but I can't think of a solution that allows both :/

How about matching the regex you currently have AND the same thing without dots?

> const c = 'foo bar.baz';
undefined
> c.match(/[^<>"'`\s]*[^<>"'`\s:]/g).concat(c.match(/[^<>"'`\s]*[^<>"'`\s:]/g))
[ 'foo', 'bar.baz', 'foo', 'bar.baz' ]
> c.match(/[^<>"'`\s]*[^<>"'`\s:]/g).concat(c.match(/[^<>"'`\s.]*[^<>"'`\s:.]/g))
[ 'foo', 'bar.baz', 'foo', 'bar', 'baz' ]

h311x · 2020-04-28T02:07:03Z

JSX uses “className” not “class” :)
Also would it be capable of allowing us to use conditional class names in vue templates like this:

:class="{[someComputedValueThatReturnsAString]: true}"

adamwathan · 2020-04-28T02:10:34Z

JSX uses “className” not “class” :)

Thankfully not important for this.

Also would it be capable of allowing us to use conditional class names in vue templates like this:
:class="{[someComputedValueThatReturnsAString]: true}"

Only if the computed value contains the entire class string and isn't dynamically calculated with weird string interpolation or anything. All of the regular limitations of PurgeCSS are unchanged here, read our guide on writing purgeable HTML:

https://tailwindcss.com/docs/controlling-file-size/#writing-purgeable-html

adamwathan · 2020-04-28T02:18:39Z

How about matching the regex you currently have AND the same thing without dots?

@utkarshkukreti Good idea! Updated it to support Pug a bit better using your solution 👍

brandonpittman · 2020-04-28T03:00:47Z

@adamwathan Will this pass through whitelisting?

kirkbushell · 2020-04-28T03:05:11Z

haha this is great. I just added a little script on my forge deployments to do exactly this!

klaasgeldof · 2020-04-28T05:37:21Z

Great improvement!

Unfortunately, the ignore annotations don't work when importing external css into sass (see FullHuman/purgecss#170). For example, I have this in app.scss one of my projects:

@tailwind base;

@tailwind components;

/* purgecss start ignore */
@import "~toastr/toastr.scss";
@import "~@fancyapps/fancybox/dist/jquery.fancybox.css";
/* purgecss end ignore */

@tailwind utilities;

But this still strips all of the css of toastr and fancybox. If you have a solution for this, that would be great 😃

Otherwise I guess it's still possible to pass whitelistPatterns?

dominikzogg · 2020-04-28T06:36:06Z

Using ReactJS would mean add *.jsx or *.tsx to the list?

Using VueJs would mean add *.vue to the list?

No other changes required?

tbillington · 2020-04-28T07:06:07Z

no custom CSS authored in your CSS files is purged

Could this possibly be configurable?

OwenMelbz · 2020-04-28T07:26:55Z

This is awesome 🤩

What’s the chances of you allowing to pass in a whitelist to ignore? I feel like many people use the whitelist... especially on CMS driven websites where classes might come from the database 😇

diwms · 2020-04-28T09:33:03Z

Anyone already trying this with Gatsby? Please, share your feedback if yes!

berndartmueller · 2020-04-28T10:02:07Z

Very nice feature! Thx!

I did a quick test with your regex pattern and pug syntax and it turns out that following pug code does not properly support purging css class names:

span.inline-grid.grid-cols-3(class="px-1.5")
  .col-span-2
    Hello
  .col-span-1.text-center
    World!

Output of regex matching is following:
["span.inline-grid.grid-cols-3(class=", "px-1.5", ")", ".col-span-2", "Hello", ".col-span-1.text-center", "World!", "span", "inline-grid", "grid-cols-3(class=", "px-1", "5", ")", "col-span-2", "Hello", "col-span-1", "text-center", "World!"]

As you can see, grid-cols-3 is wrongly extracted.

I had this issue already a few weeks ago and I came up with the solution to do the class extraction in multiple passes (following is postcss-purgecss config):

defaultExtractor: content => {
    const firstPassMatches = content.match(/[\w-/:]+(?<!:)/g) || [];
    const secondPassMatches = content.match(/[\w-/.:]+(?<!:)/g) || [];
    const combined = firstPassMatches.concat(secondPassMatches);
    const unique = Array.from(new Set(combined));

    return unique;
  },

- Add better Pug support - Add "modes", with "all" and "conservative" by default - Allow passing options through to PurgeCSS - Rename `paths` to `content` to match PurgeCSS

adamwathan · 2020-04-28T13:55:18Z

But this still strips all of the css of toastr and fancybox. If you have a solution for this, that would be great

@klaasgeldof The solution in your case is to use the preservable comment syntax for Sass:

/** purgecss start ignore */

Note the double asterisk at the beginning 👍

Either way this issue won't impact this feature, these comments are added dynamically by Tailwind during the PostCSS phase, which is well after Sass is done looking at the files.

adamwathan · 2020-04-28T13:56:22Z

Using ReactJS would mean add *.jsx or *.tsx to the list?

Using VueJs would mean add *.vue to the list?

No other changes required?

@dominikzogg Correct, you just pass an array of paths to where all of your templates are and you're done (as long as you follow the rules of writing purgeable HTML).

dominikzogg · 2020-04-28T13:59:44Z

@dominikzogg Correct, you just pass an array of paths to where all of your templates are and you're done (as long as you follow the rules of writing purgeable HTML).

@adamwathan perfect

adamwathan · 2020-04-28T14:04:01Z

I've pushed an update that makes things more configurable. Details below!

Passing options directly to PurgeCSS

Now you can pass an options object which will be passed directly to PurgeCSS so you have access to any other PurgeCSS features you want like whitelisting, overriding the extractor, whatever you want.

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],

    // These options are passed directly to PurgeCSS
    options: {
      whitelist: ['bg-red-500', 'px-4']
    }
  },
  // ...
}

I've also renamed the paths option to content to match PurgeCSS.

Better Pug support

I've improved the matching strategy a bit more to better handle Pug. Works pretty great now, even on stuff like this:

span.inline-grid.grid-cols-3(class="px-1.5")
  .col-span-2
    Hello
  .col-span-1.text-center
    World!

New `mode` feature

As I mentioned in the original post, this PurgeCSS integration is designed to be fairly conservative by default and only purges styles generated by @tailwind components and @tailwind utilities to make it easier to integrate with third-party tools and to avoid accidentally stripping base styles when working with frameworks that hide their base HTML template in node_modules like Next.js.

If you want to purge everything (at your own risk of course), you can now do so by setting mode to all:

// tailwind.config.js
module.exports = {
  purge: {
    mode: 'all'
    content: ['./src/**/*.html'],
  },
  // ...
}

The default mode is "conservative" in case you're ever inclined to set it explicitly:

// tailwind.config.js
module.exports = {
  purge: {
    mode: 'conservative'
    content: ['./src/**/*.html'],
  },
  // ...
}

hkhanna · 2020-04-28T14:34:18Z

This is huge. For folks (me) who accidentally purged things like the nprogress css styles and then are dumbfounded why the progress bar is not showing up, this will ease hours of frustration.

Haqverdi · 2020-04-28T15:15:35Z

is it will be enabled by default?

adamwathan · 2020-04-28T15:18:16Z

is it will be enabled by default?

@Haqverdi Only if you have actually provided a list of paths and NODE_ENV is production. If you leave the purge option out of your config entirely it will never be enabled.

josemarcilio · 2020-04-28T16:26:16Z

This is awesome. Can't wait to use it!

dominikzogg · 2020-04-30T05:05:30Z

@adamwathan updated to 1.4 and adapted the config, works like a charm (react, vue)

chubbyts/react-petstore@5c27bcb
chubbyjs-legacy/petstore-vue@92fd622

shirazz · 2020-05-02T15:59:10Z

const purgecssConfig = {
  content: ["./components/**/*.jsx", "./pages/**/*.jsx"],
  whitelistPatterns: [/^PhoneInput/, /^Toastify/, /^alice-carousel/],
  whitelistPatternsChildren: [/^Toastify/],
  defaultExtractor: (content) => {
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
    return broadMatches.concat(innerMatches);
  },
};

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    "postcss-nested": {},
    "postcss-custom-properties": {},
    autoprefixer: {},
    "@fullhuman/postcss-purgecss":
      process.env.NODE_ENV === "production" ? purgecssConfig : false,
  },
};

In my NextJS app, I have a postcss.config.js file like the above. Updated the tailwind to new version which has the purgeCSS support inbuilt. I tried removing the postcss-purgecss plugin and added the purge css configuration in my tailwind.config.js Unfortunately it's not working. Can anyone please guide me here to make this work.

adamwathan · 2020-05-02T17:24:39Z

Can you create a project that reproduces the issue so I can better help troubleshoot?

shirazz · 2020-05-03T18:53:46Z

@adamwathan Really sorry this was purely my fault. For some reason my tailwind was not updated to 1.4. Once i did it, everything worked as a charm. Thank you very much for adding this feature out of the box.

BTW. the only issue which i face is, while using a custom variant, tailwind-dir where my ltr: styles are purged. I haven't gone deep into this. but the issue is there. I can provide a repo if it helps.

divdax · 2020-05-04T20:55:41Z

Today i updated tailwind 1.4 to use purgecss. One thing i've noticed is that .mr-1.5 was purged. The class is in use in one of my blade files.

klaasgeldof · 2020-05-04T21:01:26Z

@divdax Had the same thing, this fixed it for me:

purge: {
  options: {
    whitelistPatterns: [/^.[^\.]*\.[^\. "']*/],
  },
},

@adamwathan Maybe include this pattern by default?

divdax · 2020-05-04T21:21:29Z

It works! Thank you @klaasgeldof! 🙏 And yes... this pattern should be included by default.

devcircus · 2020-05-04T22:13:32Z

Not sure the framework should include white list patterns out of the box. That should probably be handled via an extractor pattern, like the one suggested by tailwindui.

adamwathan · 2020-05-04T22:27:20Z

@divdax That class should not be purged using our default settings, we even have a test for that here:

https://github.com/tailwindcss/tailwindcss/blob/master/__tests__/purgeUnusedStyles.test.js#L49

Can you create a project that reproduces the issue?

klaasgeldof · 2020-05-05T05:31:22Z

I was wrong. Before Tailwind had purge baked in, the classes with dots were purged and I had to add the pattern. I copied my patterns (including this one) to the Tailwind purge config because I supposed it would behave the same. But now I removed the pattern and it works... @divdax Check if there is no other purging going on in your production build apart from the Tailwind purge.

agcty · 2020-05-09T10:32:07Z

@adamwathan What do you mean with:

Essentially we make your CSS file look like this:

/* purgecss start ignore */
@tailwind base;

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

.btn {
  @apply bg-blue-500 px-4 py-2 text-white;
}

.alert {
  @apply border p-4 rounded;
}

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

.custom-utility {
  foo: bar;
}
/* purgecss end ignore */

We still need to add some sort of tailwind.scss file and import it globally so all our components can use tailwind classes right? Would we copy the contents of your comment? Or could we just use:

@tailwind base;
@tailwind components;
@tailwind utilities;

and the right stuff is purged automatically without having to use /* purgecss start ignore */ comments?

adamwathan · 2020-05-09T12:52:12Z

You don't have to copy the CSS I pasted there, it's just explaining how it's working conceptually to people who are used to configuring PurgeCSS with the ignore comments manually.

claudiodekker · 2020-05-16T14:41:42Z

Super cool to see this as part of the core!

For those who want to combine this with Laravel (and possibly also for those migrating from spatie-mix-purgecss), here's the configuration set spatie-mix-purgecss was using, which might give you a good starting point:

module.exports = {
  purge: {
      // enabled: true,
      content: [
          "app/**/*.php",
          "resources/**/*.html",
          "resources/**/*.js",
          "resources/**/*.jsx",
          "resources/**/*.ts",
          "resources/**/*.tsx",
          "resources/**/*.php",
          "resources/**/*.vue",
          "resources/**/*.twig",
      ],
      options: {
          // defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
          whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
      }
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

If you want 100% the same exact behavior as laravel-mix-purgecss, you can uncomment the defaultExtractor option. If you're not sure and just want something that works, just stick with this default, as it's pretty much tailor-fit to TailwindCSS.

Hope this helps!

cygnusross · 2020-05-24T20:53:03Z

Super cool to see this as part of the core!

For those who want to combine this with Laravel (and possibly also for those migrating from spatie-mix-purgecss), here's the configuration set spatie-mix-purgecss was using, which might give you a good starting point:
module.exports = {
  purge: {
      // enabled: true,
      content: [
          "app/**/*.php",
          "resources/**/*.html",
          "resources/**/*.js",
          "resources/**/*.jsx",
          "resources/**/*.ts",
          "resources/**/*.tsx",
          "resources/**/*.php",
          "resources/**/*.vue",
          "resources/**/*.twig",
      ],
      options: {
          // defaultExtractor: (content) => content.match(/[\w-/.:]+(?<!:)/g) || [],
          whitelistPatterns: [/-active$/, /-enter$/, /-leave-to$/, /show$/],
      }
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
If you want 100% the same exact behavior as laravel-mix-purgecss, you can uncomment the defaultExtractor option. If you're not sure and just want something that works, just stick with this default, as it's pretty much tailor-fit to TailwindCSS.

Hope this helps!

Very useful, thank you!

cll0ud · 2020-05-24T23:47:18Z

I got it working fine on nuxt.js with Vuetify. I had to disable purgeCSS from nuxt.config.js because it was breaking Vuetify's style, after that it worked like a charm using the following config:

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
  purge: {
    content: [
      './components/**/*.vue',
      './layouts/**/*.vue',
      './pages/**/*.vue'
    ],
    options: {
      whitelist: ['antialiased', 'font-sans']
    }
  },
  important: true,
  theme: {},
  variants: {},
  plugins: []
}

I noticed a little problem: I added the prefix "tw-" and when checking the generated css, I noticed that it had included ".tw-container" classes from Tailwind but I haven't used those at all. Thing is, Vuetify's got their own ".container" so it got ignored by the extractor even though I was using the prefix. Not a major problem but still unexpected result, I guess?

BTW, thanks for this feature, I love it!

MalvinJay · 2020-05-31T16:23:33Z

This saved me two nights of shame. 😢 👍

silicahd · 2020-08-09T00:27:47Z

This works great in a single app system. However in a CMS where you have lets say a User Front end and Admin section, how can you split the two css files.

As an example

purge: { enabled: true, content: [ './admin/**/Resources/views/*.blade.php', './users/**/Resources/views/*.blade.php' ], },

Is there a way to get the css for each page defined?

eg. user.css and admin.css

OwenMelbz · 2020-08-09T09:27:41Z

Do you have 2 css files output from the same tailwind config?

Also, it's probably not recommended to use

purge.enabled = true

You should try use NODE_ENV as production and it's automatic then

silicahd · 2020-08-09T16:17:37Z

Do you have 2 css files output from the same tailwind config?

Also, it's probably not recommended to use

purge.enabled = true

You should try use NODE_ENV as production and it's automatic then

Thank you for the response, I think I figured out what I was looking to.

In order to create a Laravel mix file for backend and frontend each (and other entry points if needed).

For Laravel this is a must as it really makes not sense to have the css from frontend mixed with the backend. In reality what I will be working on is to make a css file for each page. This way you can take advantage of a super small css file in each page for use on something like AMP. I mean what is the point of using tailwindcss if we are not doing it all the way with Laravel :)

package.json

   "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env process.env.section=website NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "admin-dev": "npm run admin-development",
        "admin-development": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "admin-watch": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "admin-prod": "npm run admin-production",
        "admin-production": "cross-env process.env.section=admin NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

webpack.mix.js:

const mix = require('laravel-mix');
require('laravel-mix-tailwind');


if (mix.inProduction()) {
  mix
   .version();
}

if (process.env.section) {
   require(`${__dirname}/webpack.mix.${process.env.section}.js`);
 }

create webpack.mix.website.js:

const mix = require('laravel-mix');
require('laravel-mix-tailwind');


mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css')
   .tailwind('./tailwind.config.js');

create webpack.mix.admin.js:

const mix = require('laravel-mix');
require('laravel-mix-tailwind');


mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css/admin')
.tailwind('./tailwind.admin.config.js')

create tailwind.admin.config.js:

module.exports = {
    purge: [
      './Modules/**/Resources/views/*.blade.php',
      './Modules/**/Resources/views/**/*.blade.php',
    ],
    theme: {
      extend: {}
    },
    variants: {},
    plugins: [
      require('@tailwindcss/custom-forms')
    ]
  }

silicahd · 2020-08-15T05:04:09Z

I have to point out, the above solution still does not fix the fundamental problem. As many know google will rate a website based on many aspects and one is Unused Css. So even if you run a purgecss and make the file smaller it will still have classes from other pages so you will still be penalized by google. In reality the solution would be to generate one css file per page each page on a website.

However it is still better than other frameworks.

mklueh · 2020-10-04T15:45:09Z

@virgiltu do you have a source for your statement?

silicahd · 2020-10-04T15:47:43Z

@virgiltu do you have a source for your statement?

Just use the google insight tool or lighthouse in dev tools. You will see google taking points for having unused CSS on the page. I am not sure how to add images but here is a list what you get penalized for.

Eliminate render-blocking resources
Remove unused CSS
Preload key requests
Defer offscreen images
Serve images in next-gen formats
Minify CSS
Remove unused JavaScript

givebk-bot · 2022-05-14T13:05:54Z

Hey! Looks like someone invited me to this issue.

antl3x · 2022-05-14T13:06:31Z

@givebk-bot !donate @adamwathan $1

thanks for this PR!

givebk-bot · 2022-05-14T13:06:56Z

🎁 Hey @adamwathan, you have just received U$ 1 from @nthypes! @nthypes thanks for your support! ❤️ @adamwathan, you can check your balance at https://givebk.io. ═══ (powered by https://givebk.io) ID: cd57e392-67c2-4dbc-b719-1975bb534e41

adamwathan added 2 commits April 27, 2020 21:24

Integrate PurgeCSS directly into Tailwind

ec0b7a2

Make PurgeCSS regex compatible with node 8

4c3e97c

Support purging Pug templates a bit better

b0ac3c5

taylorbryant mentioned this pull request Apr 28, 2020

Add PurgeCSS comments to tailwind.css #1551

Closed

Improve PurgeCSS integration

64b6c95

- Add better Pug support - Add "modes", with "all" and "conservative" by default - Allow passing options through to PurgeCSS - Rename `paths` to `content` to match PurgeCSS

adamwathan merged commit da5eaed into master Apr 28, 2020

adamwathan mentioned this pull request Apr 28, 2020

Add PurgeCSS comments to Tailwind #1567

Closed

paul-vd mentioned this pull request Apr 29, 2020

Update postcss.config.js vercel/next.js#11366

Merged

adamwathan deleted the purgecss branch May 3, 2020 19:04

babichjacob mentioned this pull request May 5, 2020

Why change from Tailwind's purge? babichjacob/sapper-postcss-template#7

Closed

This was referenced May 27, 2020

Adds Tailwind PurgeCSS paths to config TitasGailius/laravel-moonlight#8

Closed

adds new purgecss paths to the tailwind config file TitasGailius/laravel-moonlight#9

Merged

jaepass mentioned this pull request Jul 7, 2020

[CHEC-667] - Bugfix/purge unused styles chec/ui-library#233

Merged

cascandaliato mentioned this pull request Jul 26, 2020

replace postcss with tailwind built-in purge cascandaliato/goto#42

Open

Integrate PurgeCSS directly into Tailwind #1639

Integrate PurgeCSS directly into Tailwind #1639

Conversation

adamwathan commented Apr 28, 2020 • edited Loading

MrJmpl3 commented Apr 28, 2020

utkarshkukreti commented Apr 28, 2020

h311x commented Apr 28, 2020

adamwathan commented Apr 28, 2020

adamwathan commented Apr 28, 2020

brandonpittman commented Apr 28, 2020

kirkbushell commented Apr 28, 2020

klaasgeldof commented Apr 28, 2020 • edited Loading

dominikzogg commented Apr 28, 2020 • edited Loading

tbillington commented Apr 28, 2020

OwenMelbz commented Apr 28, 2020

diwms commented Apr 28, 2020

berndartmueller commented Apr 28, 2020

adamwathan commented Apr 28, 2020

adamwathan commented Apr 28, 2020

dominikzogg commented Apr 28, 2020

adamwathan commented Apr 28, 2020

Passing options directly to PurgeCSS

Better Pug support

New mode feature

hkhanna commented Apr 28, 2020 • edited Loading

Haqverdi commented Apr 28, 2020

adamwathan commented Apr 28, 2020

josemarcilio commented Apr 28, 2020

dominikzogg commented Apr 30, 2020

shirazz commented May 2, 2020 • edited Loading

adamwathan commented May 2, 2020

shirazz commented May 3, 2020

divdax commented May 4, 2020

klaasgeldof commented May 4, 2020

divdax commented May 4, 2020

devcircus commented May 4, 2020

adamwathan commented May 4, 2020 • edited Loading

klaasgeldof commented May 5, 2020

agcty commented May 9, 2020

adamwathan commented May 9, 2020

claudiodekker commented May 16, 2020

cygnusross commented May 24, 2020

cll0ud commented May 24, 2020

MalvinJay commented May 31, 2020

silicahd commented Aug 9, 2020 • edited Loading

OwenMelbz commented Aug 9, 2020

silicahd commented Aug 9, 2020 • edited Loading

silicahd commented Aug 15, 2020

mklueh commented Oct 4, 2020

silicahd commented Oct 4, 2020 • edited Loading

givebk-bot commented May 14, 2022

antl3x commented May 14, 2022

givebk-bot commented May 14, 2022 via email

adamwathan commented Apr 28, 2020 •

edited

Loading

klaasgeldof commented Apr 28, 2020 •

edited

Loading

dominikzogg commented Apr 28, 2020 •

edited

Loading

New `mode` feature

hkhanna commented Apr 28, 2020 •

edited

Loading

shirazz commented May 2, 2020 •

edited

Loading

adamwathan commented May 4, 2020 •

edited

Loading

silicahd commented Aug 9, 2020 •

edited

Loading

silicahd commented Aug 9, 2020 •

edited

Loading

silicahd commented Oct 4, 2020 •

edited

Loading