MoguraDev

angularにtailwind cssを導入する

Tweet

概要

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}"],
},
// 以下、初期設定なので省略
};

感想

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