Angular 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: [],
}

設定後、ビルドログの中を確認して、以下のように style.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 の設定が正しく反映できていない場合、 style.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}",
    ],
  },
  // ...  
};