angular の 11.2 から tailwind css の導入が楽になったようなので試してみました。
tailwindcss をインストールします。
npm i -D tailwindcss
tailwind.config.js を作成します。
npx tailwind init
style.css で tailwindcss を import します。
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
tailwind.config.js の mode と purge を設定します。
module.exports = {
mode: "jit",
purge: ["./src/**/*.{html,ts}"],
// 以下、初期設定なので省略
};
tailwind.config.js の purge を設定します。
angular が環境変数 TAILWIND_MODE をセットしてくれるので、それをチェックして purge するかどうかを判定します。
module.exports = {
purge: {
enabled: process.env.TAILWIND_MODE === "build",
content: ["./src/**/*.{html,ts}"],
},
// 以下、初期設定なので省略
};
楽でした。今後は積極的に使おうと思います。