Tailwind cssについて、Webクリエイターボックスでも利用割合調査のアンケートを行っていましたが、やはりそもそも認知度が低いようです。
今回は、以前にも取り上げた、このTailwind cssが、いったいどんなものか再度掘り下げてみたいと思います。
Tailwind CSS公式ページ
1. 公式のcdnを使ってコーディング
<script src="https://cdn.tailwindcss.com"></script>をスタイルなど記述している部分に追加。
これにより、利用が可能となりますが、ロード時に3MBを超えるデータ受信が必要となります。開発時の動作確認用であり、そのままの利用は推奨されておりません。
したがって、コーディングが一通り終わってからのページ公開時は、WindowsであればPowershellやコマンドプロンプト、Macであればターミナルのコマンドで、tailwind cssのうち必要部分だけを抽出したoutput.css（これは仮。出力ファイル名は任意）を生成し、実際の公開時にはこの軽量化されたcssが使用できます。
2. 使用したtailwind cssだけを抽出したoutput.css(仮名)をビルド
Tailwind CSSの公式CDNを利用すると、デフォルトで全てのスタイルが詰まっています。その結果、ファイルサイズが大きくなる傾向があります。これをパージ（不要な部分を削除）するための手順は次の通りです：
- カスタムビルドの作成: プロジェクトにTailwind CSSを導入し、
tailwind.config.jsファイルを設定します。これにより、プロジェクトに最適なカスタマイズが可能となります。 - パージ設定の適用:
tailwind.config.jsファイルでパージオプション（※tailwindの過去バージョンでは”purge”でしたが、”content”というオプション名が現在の仕様ですのでご注意を）を設定します。TailwindはHTMLファイルを検査し、使われていないスタイルを取り除きます。 - ビルドの実行: ビルドスクリプトを実行し、カスタマイズされたTailwind CSSをビルドします。この結果、パージされたCSSファイルが生成されます。
- 生成したCSSの適用: 生成したCSSファイルをHTMLファイルとリンクさせます。
具体的なコードの例は以下となります。
カスタムビルドの作成
まずはじめに、npmを使用してTailwind CSSをインストールします：
npm install tailwindcssパージ設定の適用
次に、tailwind.config.js という名前でjsファイルをプロジェクトのルートに作成し、以下のように設定します。
「プロジェクトのルート」は開発中のhtmlファイルが存在しているディレクトリです。
（※ Macでファイルのフルパスをコピーする方法は、option + command + C なので、Finderで開発中のindexhtmlファイルがあるディレクトリを開き、option + command + C でパスをコピー）
tailwind.config.js
module.exports = {
content: ['[ここに**パスが入ります**]/index.html']
}content オプションでは、tailwind cssを使用しているHTMLファイルまでのパスを指定します。（※繰り返しますが、tailwindの過去バージョンではオプション名が”purge”でしたが、”content”に変更されていますのでご注意を）
僕の環境では以下のようになります。Dropbx上のディレクトリ内でコーディングしているのでパスにDropboxという文字が見られます。
その後、以下のコマンドでCSSをビルドします。
ビルドの実行
powershellまたはターミナルで、「プロジェクトのルート」つまり開発中のhtmlファイルが存在しているディレクトリに、cdコマンドで移動し、以下を実行します。
npx tailwindcss build -o output.css実際にコマンドを実行したターミナルの画面
そうすると、index.htmlのあるディレクトリの中に、output.cssが作成されます。
生成したCSSの適用
最後に、HTMLファイル内で、この生成された”output.css"をリンクします：
<link href="./css/output.css" rel="stylesheet">これが、railwind実装までの一連の操作となります。
もしindex.htmlを再度編集し、使用するtailwindが増えた際は、改めてoutput.cssを出力し直す必要がありますが、
3. 動的にクラスを生成できるtailwindの機能をフルに使う
任意の数値を指定したい
文字サイズなどは決められた数値が用意されてますが、ピンポイントで位置を指定したい時などは角括弧で囲んで指定します。
<h1 class="text-[30px]">Hello</h1>マイナス値も同じく角括弧に入れればOK。
<h1 class="mt-[-10px]">Hello</h1>疑似要素や擬似クラスを使いたい
::before や ::after を使って指定する疑似要素は、 before: や after: に続けて適用させたいプロパティーと値を指定します。
<h1 class="before:content-['🐱']">Hello</h1>tailwindを、PCをベースにコーディングしたいときのカスタマイズ
tailwindは標準だとモバイルファーストのメディアクエリ設定（つまり、スマホサイズをベースにスタイルを記述し、PCサイズになったときの記述は事後的にメディアエリで記述する）ですが、現場によってはPCをベースにコーディングしたいときがあるかと思いますので、そのカスタマイズ方法です。
tailwind.config.js
に、theme オプションを追加する。
// パージしたcssの出力先（"purge"というオプションはなくなり、"content"に変更されている）
content: ['[ここに**パスが入ります**]/index.html'],
theme: {
extend: {
screens: {
'max-md': {'max': '768px'}
}
}
}上の例では、ブレイクポイントが「768px未満」のときに適用されるプレフィックスを追加登録でき、これを以下のようにクラス名に使用すると、
<div class="max-md:hidden">スマホ表示では見えなくなるテキスト</div>出力時は以下のように、
@media not all and (min-width: 768px){
.max-md\\:hidden{
visibility: hidden;
}
}ちょっと記述が独特ですが、@media not all and (min-width: 768px) というメディアクエリは、「画面の最小幅が768pxでないすべてのメディアタイプ」にスタイルを適用されるものとなります。
使いどころ！（フロントエンドエンジニアの地味な悩み解消）
LP制作のように、システマチックにならない手のかかるデザインを何枚も作成しなければいけないようなときが使い所です。
どういうことかというと、、
例えば、「見出し」って、ドキュメント作成ツールやブログページ、商品ページなどではコーディング上はh2, h3..と、いうてもh4くらい(つまり4パターンくらい)までがいいとこですが、ビジュアル表現上は、見出しパターンの見た目が有機的に無尽蔵にあったりしますよね？
対して、教科書や取り扱い説明書、技術書等、本サイトのブログ記事やECサイトの商品ページのような、特定のテンプレートが繰り返し使用されるページは、こういう書式ルールがあると、安心してサクサクとロジカル脳でコーディングできます。
しかし、サイト内に新規に追加されるLPやプロモーション用のページなどは、ほぼそうした制約に囚われないデザインになります。
だから今までサイト上で見られなかった見出しの扱いやベースフォントが登場、かつ、なんならWebフォントもこのページ用に新規に追加されます。
Webデザインでは、デザインとコーディングでまったく感覚が違うので、進むたびに新たなスタイルを追加、追加、なんて無限地獄になりそうなときに、僕にとってtailwind cssは救いの神なのです！
Webクリエイターボックスにも記述がありますが、”tailwind css”は”bootstrap”のような、「cssフレームワーク」と混在されがちですが、全く使い方が別なので、上のようなお悩みをお持ちの方は、習得する価値はあるかもしれません。かつ、cssコードの行数が圧倒的に少なくなって、ロードも軽くなります。その箇所「一度きり」しか使用しないスタイルにもひとつひとつcssクラス名やスタイルの長いコードを書く苦労・無駄から解放されます。
