ここ最近、仕事で tailwindcss を使うようになりました。ただしインストールや設定もろもろ CSS に明るい同僚がセットアップしてくれたものので、私自身は与えられた環境でぬくぬくと CSS を書いているだけでした。数ヶ月経過したところでようやく「インストールとか設定まわりの知識があったほうが幸せになれるんじゃないか」という事に気づいたので、調べた事をまとめて記事にしました。
tailwindcss のインストールから設定のカスタマイズまで書き起こしたらかなり長くなってしまったので、3 部構成でお伝えします。ナメた感じに見えるタイトルは、長い上に文章が堅苦しくならないよう気をつけていこうという自分への戒めでございます。
記事執筆の環境は下記の通りです。
- @angular/cli v12.2
- node v16.8 (npm v7.21)
- tailwindcss v2.2
それでは tailwindcss のインストールからスタートしてみましょう！
インストールする
いつもどおり Angular のプロジェクトを作ります。説明のためにスタイルシートのフォーマットは SCSS を選択しておいてください。
npx -p @angular/cli ng new {PROJECT_NAME}
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS
tailwindcss をインストールします。
npm i -D tailwindcss
tailwindcss の設定ファイルを作ります。
npx tailwindcss init
> Created Tailwind CSS config file: tailwind.config.js
このような設定ファイルが生成されます。今はまだ何も書き込まなくて OK です。
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
styles.scss で tailwindcss のクラスを読み込みます。
// styles.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
これで tailwindcss のインストールはシュッと完了しました！ 😊
CSS を書いてみる
おなじみの Angular スタートアップ画面に tailwindcss で CSS を書いてみましょう。
npm start -- --open
ブラウザの要素の選択を使って、カードのコンテナを選びます。
開発者ツールで bg- などタイプすると大量のサジェストが現れます。ここから bg-gray-400 を選んでみます。
続けて p-10 rounded-2xl を設定するとコンテナの見た目がこのように変わります。
今度は hover:bg-blue-400 を追加してみましょう。
カードのコンテナにマウスカーソルを合わせると背景色が青に変わります。
CSS のクラス指定を app.component.html にコピペすれば、そのままプロダクションコードとして使えます。
<div class="card-container
bg-gray-400
p-10
rounded-2xl
hover:bg-blue-400
">
アメージング😳！！CSS クラスがシュッと使えるようになりました！ 😊
ちょっと探検：これらのクラスは何なのか
bg-gray-400 p-10 rounded-2xl は CSS を下記のように書き足すのと同等です。
<!-- src/app/app.component.html -->
<!-- 429 行目 -->
<!-- いつもなら、card-wrapper-gray のようなクラスを書き足す -->
<div class="card-container card-wrapper-gray">
<a
class="card"
target="_blank"
...
// src/app/app.component.scss
// クラスにスタイルを当てるためせっせと CSS を書く
.card-wrapper-gray {
padding: 2.5rem;
background: #9CA3AF;
border-radius: 1rem;
}
tailwindcss は膨大な CSS クラス群を持っているため、生の CSS/SCSS を書き足す手間がグッと省けます。背景色、パディング、角丸...などなど、ユーティリティを任意に組み合わせてスタイルをあてがうので tailwindcss のクラス群は「ユーティリティクラス」と呼びます。
bg-gray-{数値} は tailwindcss のカラーパレットと連動した背景色です。このクラスを使う事で、自然とアプリ全体が統一された色合いになります。
https://tailwindcss.com/docs/customizing-colors
p-{数値} は tailwindcss に定義されたパディングのクラス群です。このクラスを使う事で、単位のばらつきを抑え一定間隔の刻みで統一する事ができます。
https://tailwindcss.com/docs/padding
ビルドする
では次に Angular アプリをビルドしてみましょう。src 配下がビルド対象ですよという事を tailwindcss に伝えるために、設定ファイルの purge の部分を下記のように書き換えます。
// tailwind.config.js
module.exports = {
purge: {
content: ['./src/**/*.{html,ts}'],
},
...
}
いつも通りビルドを実行します。
npm run build
styles.{hash}.css のファイルサイズは約 2.8 MB になりました。巨大ですね。
なぜ巨大になるかと言うと、デフォルトの状態では膨大なユーティリティクラスが全部吐き出されるからです。
tailwindcss の「パージ」機能を使うと、未使用のユーティリティクラスをビルドから除外する事ができます。設定方法は Node の環境変数 NODE_ENV をプロダクションにセットするだけです。
// package.json
"scripts": {
"build": "NODE_ENV=production ng build",
package.json を汚したくない場合はこのような方法でもパージできます。
// tailwind.config.js
module.exports = {
// purge の部分をこのように書き換える
purge: {
content: ['./src/**/*.{html,ts}'],
enabled: process.env.TAILWIND_MODE === 'build',
},
再びビルドしてみると styles.{hash}.css のファイルサイズは約 3.6 KB になりました。パージ前の 2.8 MB がパージ後に 3.6 KB です。単位がひとつ下がってます。
npm run build
これで Angular の budget のしきい値を超える事なく、シュッとビルドできるようになりました！ 😊
次の記事では設定ファイルの内容を紹介します。
Angular 12 にシュッと導入した tailwindcss の設定ファイルをチャッと理解する
参考：tailwindcss のビルドコマンド
下記のコマンドを叩くと Angular のビルドを介さずに CSS のみビルドする事ができます。非常に高速なので CSS のビルド結果だけを見たい時に便利です。
./node_modules/.bin/tailwindcss --output ./dist/hoge.css
参考：VSCode のエクステンション
VSCode を使っている場合は下記のエクステンションをインストールしておくと便利です。
Tailwind CSS IntelliSense tailwindcss の CSS クラスをサジェストします。
Headwind ショートカットキーで CSS クラスを並べ替えます。
シュッと tailwind の CSS クラスが書けるようになりますね！ 😊