# Using Tailwind CSS 1.4’s built-in PurgeCSS Options with Sage 9

**URL:** https://discourse.roots.io/t/using-tailwind-css-1-4-s-built-in-purgecss-options-with-sage-9/18158
**Category:** sage
**Tags:** webpack, sage9
**Created:** 2020-05-02T12:44:00Z
**Posts:** 7

## Post 1 by @kpoxo6op — 2020-05-02T12:44:00Z

hello all, I have added PurgeCSS to my project by following this guide: [Removing unused CSS with Purgecss/UnCSS](https://discourse.roots.io/t/removing-unused-css-with-purgecss-uncss/11586) and ran into an issue.

The issue is my tailwindcss built-in utility class `w-1/3` is not evaluated into `width:33.333333%` when I enable purgecss. Other styles look broken too.  
These are my local VS remote screenshots:

 ![image](https://discourse.roots.io/uploads/default/original/2X/a/acfdfc397929b9b630d45c7c499127e1ddf128e8.png)

- my tailwind.config.js is out-the-box default config
- I am sure this issue is about purgecss. My styles come back to normal as soon as I comment out purgecss stuff at `webpack.config.optimize.js`

my package versions:

- purgecss-webpack-plugin@0.23.0
- tailwindcss@1.4.1
- webpack@3.10.0

Question - How do I debug and fix issues like that? I am scared.

---

## Post 2 by @alwaysblank — 2020-05-02T14:12:09Z

Where do you use `.w-1/3` in your theme? Have you made sure PurgeCSS is checking that location?

---

## Post 3 by @kpoxo6op — 2020-05-02T23:34:05Z

> Where do you use `.w-1/3` in your theme?

I use class `.w-1/3` in a Vue JS component at `resources/assets/scripts/vue/vue2-map/src/components/ButtonRow.vue`

> Have you made sure PurgeCSS is checking that location?

Yes I think so. This is my plugin section from `webpack.config.optimize.js` and `ls` output. I have added the last line to `paths`:

```
...
    new PurgecssPlugin({
      paths: glob.sync([
        'app/**/*.php',
        'resources/views/**/*.php',
        'resources/assets/scripts/**/*.js',
        'resources/assets/scripts/vue/vue2-map/src/**/*.vue',
      ]),
      whitelist: [ // Only if you need it!
      ],
    }),
  ],
};
```

`ButtonRow.vue` with `.w-1/3` class is targeted by the `paths` above:

```
ll resources/assets/scripts/vue/vue2-map/src/**/*.vue

resources/assets/scripts/vue/vue2-map/src/components/App.vue
resources/assets/scripts/vue/vue2-map/src/components/ButtonRow.vue*
resources/assets/scripts/vue/vue2-map/src/components/CheckboxCard.vue
...others
```

---

## Post 4 by @knowler — 2020-05-03T17:34:22Z

@kpoxo6op Since you are using Tailwind CSS 1.4, I’d recommend using [the new built-in PurgeCSS feature](https://tailwindcss.com/docs/controlling-file-size#removing-unused-css). You configure it like so:

```
// tailwind.config.js
module.exports = {
  purge: {
    content: [
      // relative path globs to template files
    ],
    options: {
      // purgecss options (e.g. whitelist: [], etc.)
    },
  },
  theme: {},
  // etc.
};
```

The built-in PurgeCSS feature only purges when the `NODE_ENV` is `production` as well, it has a preconfigured default extractor (this is what I suspect is causing you issues above, since that guide was not Tailwind specific, but I had included [the default extractor](https://tailwindcss.com/docs/controlling-file-size#setting-up-purgecss-manually) in the old Tailwind guide).

---

## Post 5 by @kpoxo6op — 2020-05-04T08:32:40Z

Yes, I tried Tailwind CSS built-in PurgeCSS as well.  
I updated Tailwind CSS to 1.4 and added purgecss to my `tailwind.config.js`:

```
/module.exports = {
  purge: {
    content: [
      '../../../app/**/*.php',
      '../../../resources/views/**/*.php',
      '../../../resources/assets/scripts/**/*.js',
      '../../../resources/assets/scripts/vue/vue2-map/src/**/*.vue',
    ],
  },
  theme: {
```

TailwindCSS purgecss totally destroys my styles on remote, I can’t even say what’s not broken on my page now.

What else can I try?

---

## Post 6 by @knowler — 2020-05-04T15:03:16Z

Interesting. I just created a Sage 9 project with the Tailwind preset and gave this a try. It seems like the `content` array cannot include relative paths (presumably since it’s an array of globs).

Here’s a quick solution:

```
const {PWD} = process.env; // This will not have a trailing slash

module.exports = {
  /** this is shorthand of purge.content if you don’t have any purge.options to specify */
  purge: [
    `${PWD}/resources/views/**/*.blade.php`,
    `${PWD}/resources/assets/scripts/**/*.{js,vue}`,
  ],
  theme: {/* ... */},
};
```

You _might_ need to delete the `.cache-loader` directory from the root of your project in order to get webpack to actually recompile the styles (since the config has changed, but not the files). That might just be for JS files though (I don’t remember).

---

## Post 7 by @kpoxo6op — 2020-05-05T06:54:13Z

yaaay it worked, thanks for your help! My minified styles are not broken anymore.  
 ![image](https://discourse.roots.io/uploads/default/original/2X/e/e822e6aa3a455e80c2d98f424a6e683c20820697.png)