Anglar Project에서 tailwind의 활용

tailwind 가져오기

Tailwind 가져오기는 다음 단계에 따라 수행됩니다.
https://tailwindcss.com/docs/guides/angular

purge 설정

tailwind.config.js에 purge 설정을 추가하면build 이후의 CSS 요령을 줄일 수 있습니다.

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  purge: [
    "./src/**/*.{html,ts}",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

설정 후 구축 로그에서 다음과 같은 스타일을 확인합니다.xxxxx.css의 용량이 작아진 것을 확인하세요.

remote: client: ✔ Index html generation complete.
remote:        client: Initial Chunk Files               | Names         |       Size
remote:        client: main.8781df05f2f2f80ae88e.js      | main          |  184.73 kB
remote:        client: polyfills.e9c16e5e1913541cc638.js | polyfills     |   32.72 kB
remote:        client: styles.4808e529956a5e43d388.css   | styles        |    3.04 kB
remote:        client: runtime.7d2e27576b419591df3b.js   | runtime       | 1019 bytes
remote:        client: | Initial Total |  221.49 kB

!
purge의 설정이 제대로 반영되지 않을 때 스타일입니다.xxxxxx.css는 20M 정도입니다.
또한, purge의 설정은 NODE이다ENV가 production인 경우에만 사용할 수 있습니다.
모든 구축 환경에 적용되지 않으면 환경 설정을 수정하거나 구축 명령을 수정하십시오.

   "scripts": {
    "build": "NODE_ENV=production ng build"
   }

NODE_ENV를 만지기 어려운 경우 purge 설정을 사용하여 직접 지정할 수 있습니다.

module.exports = {
  purge: {
    enabled: true,
    content: [
        "./src/**/*.{html,ts}",
    ],
  },
  // ...  
};