Tailwind Css Purge

Posted on Edited on In , Word count in article: 154 Reading time ≈ 1 mins.

tailwind css 를 사용하면서 production 용으로 용량을 줄이려고 build 를 하는데 용량이 줄여지지 않았다.

tailwind.config.js
1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  purge: [ './index.html', './js/index.js' ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

설정대로 했는 데 왜 안되는 거야

Production 환경일 때만 purge 가 된다

Optimizing for Production 문서를 보면

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

tailwindcsstailwindcss.com/docs/optimizing-for-production

NODE_ENV 환경변수가 production 일 때 작동된다

또 한가지는 enabled: true 옵션으로 무조건 purge 를 시킬 수도 있다

tailwind.config.js
1
2
3
4
5
6
7
module.exports = {
  purge: {
    enabled: true,
    content: ['./src/**/*.html'],
  },
  // ...
}

해결방법

crossenv 설치

Mac 과 windows 를 같이 사용하니깐 cross-env 를 설치해주고

1
npm install -D cross-env

npm build 스크립트에 설정추가

npm build 에 NODE_ENV = production 을 넣어서 build 시에 자동으로 purge 되게 한다

package.json
1
2
3
"scripts": {
	"build": "cross-env NODE_ENV=production postcss src/index.css -o css/index.css"
},