概要

youtube で見る

angular の 11.2 から tailwind css の導入が楽になったようなので試してみました。

jit と非 jit 共通でやること

tailwindcss をインストールします。

npm i -D tailwindcss

tailwind.config.js を作成します。

npx tailwind init

style.css で tailwindcss を import します。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

jit で導入

tailwind.config.js の mode と purge を設定します。

module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{html,ts}"],
  // 以下、初期設定なので省略
};

非 jit で導入

tailwind.config.js の purge を設定します。

angular が環境変数 TAILWIND_MODE をセットしてくれるので、それをチェックして purge するかどうかを判定します。

module.exports = {
  purge: {
    enabled: process.env.TAILWIND_MODE === "build",
    content: ["./src/**/*.{html,ts}"],
  },
  // 以下、初期設定なので省略
};

感想

楽でした。今後は積極的に使おうと思います。