【爆速コーディング】Tailwindの本当の使い方まとめ【LPデザインも怖くない】

CSS
CSS HTML 作業効率化

Tailwind cssについて、Webクリエイターボックスでも利用割合調査のアンケートを行っていましたが、やはりそもそも認知度が低いようです。

今回は、以前にも取り上げた、このTailwind cssが、いったいどんなものか再度掘り下げてみたいと思います。

Tailwind CSS公式ページ

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
公式ページからの使用時イメージの動画。htmlのタグ内でclassの指定のみでインラインでスタイルを書いている感覚がわかりやすい。

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を利用すると、デフォルトで全てのスタイルが詰まっています。その結果、ファイルサイズが大きくなる傾向があります。これをパージ(不要な部分を削除)するための手順は次の通りです:

  1. カスタムビルドの作成: プロジェクトにTailwind CSSを導入し、tailwind.config.js ファイルを設定します。これにより、プロジェクトに最適なカスタマイズが可能となります。
  2. パージ設定の適用: tailwind.config.js ファイルでパージオプション(※tailwindの過去バージョンでは”purge”でしたが、”content”というオプション名が現在の仕様ですのでご注意を)を設定します。TailwindはHTMLファイルを検査し、使われていないスタイルを取り除きます。
  3. ビルドの実行: ビルドスクリプトを実行し、カスタマイズされたTailwind CSSをビルドします。この結果、パージされたCSSファイルが生成されます。
  4. 生成した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が作成されます。

output.cssが生成されている。必要なtailwind cssを抽出したので、サイズは10KBに軽量化されている。

生成した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クラス名やスタイルの長いコードを書く苦労・無駄から解放されます。

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    タイトルとURLをコピーしました