# Configuring PurgeCSS when using TailwindCSS

**URL:** <https://forum.elixirforum.com/t/configuring-purgecss-when-using-tailwindcss/33355>\
**Category:** Questions\
**Tags:** phoenix, webpack, tailwindcss\
**Created:** [July 26, 2020, 3:19am UTC](https://forum.elixirforum.com/t/configuring-purgecss-when-using-tailwindcss/33355 "2020-07-26T03:19:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![axelclark](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/axelclark/32/38296_2.png) [@axelclark](https://forum.elixirforum.com/u/axelclark)\
**Post date:** [July 26, 2020, 3:19am UTC](https://forum.elixirforum.com/t/configuring-purgecss-when-using-tailwindcss/33355/1 "2020-07-26T03:19:34Z")

</div>

I’ve added TailwindCSS to my Phoenix project. I’m running into a problem configuring PurgeCSS to remove unused CSS. I followed the instructions at [https://tailwindcss.com/docs/controlling-file-size](https://tailwindcss.com/docs/controlling-file-size) to add my template files to my `tailwind.config.js` file:

```javascript
module.exports = {
  purge: [
    "./js/**/*.js",
    "../lib/ex338_web/**/*.html",
    "../lib/ex338_web/**/*.ex",
    "../lib/ex338_web/**/*.eex",
    "../lib/ex338_web/**/*.leex",
    "../lib/ex338_web/**/*.md"
  ],
  theme: {
    extend: {}
  },
  variants: {
    margin: ["responsive", "first", "last"],
    padding: ["responsive", "first", "last"]
  },
  plugins: [require("@tailwindcss/ui"), require("@tailwindcss/typography")]
};

```

When I run `npm run deploy` from my assets folder, I get the following warning in my output:

```bash
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  ../css/app.css (3.54 MiB)
  app.js (660 KiB)

```

Here is the full repo: [GitHub - axelclark/ex338: Web application to manage the 338 Challenge fantasy sports league · GitHub](https://github.com/axelclark/ex338)

Does anyone have any ideas about how to config PurgeCSS properly with TailwindCSS in my Phoenix project?

---

<div class="post-metadata">

**Author:** ![axelclark](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/axelclark/32/38296_2.png) [@axelclark](https://forum.elixirforum.com/u/axelclark)\
**Post date:** [July 26, 2020, 5:01am UTC](https://forum.elixirforum.com/t/configuring-purgecss-when-using-tailwindcss/33355/2 "2020-07-26T05:01:11Z")

</div>

I was able to resolve the problem by updating the scripts in my `package.json` to add the `NODE_ENV` environmental variable:

```js
  "scripts": {
    "deploy": "NODE_ENV=production webpack --mode production",
    "watch": "NODE_ENV=development webpack --mode development --watch-stdin"
  },

```

From the TailwindCSS docs regarding [PurgeCSS Basic Usage](https://tailwindcss.com/docs/controlling-file-size#basic-usage):

> Now whenever you compile your CSS with `NODE_ENV` set to `production`, Tailwind will automatically purge unused styles from your CSS.