Zenn
🌴

Tailwind CSSを使う時に出くわす問題(2023年9月更新)

に公開
CSS
HTML
Tailwind CSS
tech

2023.09.10リライトしました。

前置き

私がtailwindcssと出会ったのは2018年頃でした。当時はCSSの組み方を模索していて、どうすれば効率が良いかなど考えてたところ、よく使うクラス群を作ってcommonファイルとして使ってました。が、class名が気に入らなかったり何度も作り直しているうちにめんどくさくなって何かいいのないかなと探してたら運命の出会いをしました。Tailwind CSSは私が今まで行ってたやり方と全く同じコンセプトで作られていました。その時発した言葉を今でもよく覚えています。「あーもうこれでいいじゃん」

で、今まで使ってみた結果いろんな問題に出くわしたのでシェアします。ただ、我流が多いのでなんかもっといい方法あるぜという方教えて下さい。

(軽く説明)tailwindcssとは

ユーティリティファーストのCSSフレームワークです。沢山のclassが用意されています。
https://tailwindcss.com/

例えば

↓にフォントにスタイルを当てる場合

<h1>tailwindcss</h1>

通常の場合

el_titleというclass(クラス名は例です)をcssファイルに設定してからhtmlに記述

css
.el_title {
  color: #000;
  font-size: 30px;
  font-weight: bold;
}
html
<h1 class="el_title">Tailwind CSS</h1>

tailwindcssの場合

text-black,text-3xl,font-boldというclassが予め用意されている

<h1 class="text-black text-3xl font-bold">tailwindcss</h1>

このようにプロパティが沢山詰まったclass群になります。(もちろんそれだけではないです)

tailwindcssの流行

ここ5年間のGoogle Trendsの「tailwindcss」の検索キーワードの傾向です。

世界では2021年12月10日にtailwindcssv3.0.0がリリースされてから急激に上昇しています。

日本もv3.0.0以降は少し上がり方が急になっているように見えます。

日本ではデジタル庁などのサイトが採用

Google Trendsはあくまで検索数字なので、使用されてるサイト数に直接的には繋がらないですが、最近デジタル庁の新しいトップページや有名なWeb制作会社の株式会社LIGのコーポレートサイトがtailwindcssを採用しており、多くのWeb制作関連の方がベンチマークしてる(?)サイトが採用してることによりそのメリットを享受しているところは増えるんじゃないかなと思います。

デジタル庁新トップページ

https://www.digital.go.jp/experimental/

株式会社LIGのコーポレートサイト

https://liginc.co.jp/

v3.0.0で急激に使用されだした理由

JITエンジンの採用でほとんどのCSSプロパティを使用できるようになった

あくまで推測ですが、以前(v2の時代)はtailwindcss本体はCSSファイルで、ここに収録されてないものは使えなかったのですが、現在はJSファイル(JITエンジン)になり、Tailwindcssでは使えないCSSのプロパティがほぼなくなりました。

旧tailwindcss本体(ver2.1.1/2.9MB)
https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.1/tailwind.min.css

現tailwindcss本体(ver3.3.3/363KMB)
https://cdn.tailwindcss.com/3.3.3

数値の指定、疑似要素、アスペクト比プロパティなども追加された

JITエンジンになったことでp-[12px]のように数値が使えるようにななりました。その他にも疑似要素のbefore:、after:やマルチカラムのcolumnsやアスペクト比のaspect-ratio、ポートレートとランドスケープ修飾子のportrait:とlandscape:、プリント修飾子のprint:も用意されました。

<p class="text-[23px] text-[#444] bg-[#bada55] before:content-['焼肉']　print:hidden">定食</p>

カバーされてないプロパティも[]で使える

それでもカバーしきれていないCSSプロパティは[カバーしきれないCSSプロパティ]のように記述すれば使えます。例えば以下は日本語サイトではよく使う縦書きにするプロパティのwriting-mode: vertical-rlを[]で使用します。[]内はスペースを入れては動きません。

<p class="text-lg [writing-mode:vertical-rl]"></p>

仕事でtailwindcssを使ってみて思ったこと

私はフリーランスで共同(チーム)で行うことはほぼないため、好きなフレームワークが使える環境なので今までずっと使用してきています。そこで感じたことをいくつか。

CSSファイルにCSSを書くことがほぼなくなる

まず、tailwindcss本体のCSSファイルを除き、自前でCSSを書くことがほぼなくなりました。v3.0.0でほとんどのプロパティがサポートされたためです。

コーディングスピートが早くなった

CSSファイルに書くことがなくなった結果、HTMLとCSSファイルの行き来がなくなるため、コーディングスピードが上がりました。なぜ早くなるのか理由は他にもあります。

よく使うコードをスニペット化できる

これもコーディングスピートを早くする一貫ですが、要はCSS付きのHTMLとして保存できるのでベースレイアウトをコピペして、カンプに合わせて整えていくやり方になります。

私の場合例えば、Mac環境の方なら知ってると思いますがAlfredのスニペットショートカットを利用します。

;secと打つと、タイトル付きのレスポンシブ対応したsectionが出るようにして

<section id="SectionName">
  <div class="inner px-[1rem] sm:px-[2rem] py-[4rem] md:py-[8rem] bg-gray-200">
    <div class="out_title max-w-screen-xl mx-auto text-center">
      <h2 class="text-3xl font-bold pb-4 md:pb-8">タイトルタイトル</h2>
      <p class="">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</section>

out_title部分を削除し、;4outと打つと4列レスポンシブのレイアウトが出るようにしてベースレイアウトができます。

<section id="SectionName">
  <div class="inner px-[1rem] sm:px-[2rem] py-[4rem] md:py-[8rem] bg-gray-200">
    <div class="out_4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4">
  　　　　　　　<div class="out_1">out_1</div>
  　　　　　　　<div class="out_2">out_2</div>
  　　　　　　　<div class="out_3">out_3</div>
  　　　　　　　<div class="out_4">out_4</div>
　　　　　　　　</div>
  </div>
</section>

さらにAlpine.jsを使うとJS付きのスニペットが作れる

Vueを使うまでもないヘッダーメニューの開閉フラグの状態管理なんかはtailwindのJS版と言われるAlpine.jsを使うとJS付きのスニペットが作れます。これもAlfredに登録しておいて

;headerと打つと以下のようにヘッダーメニューがすぐ使えるようにしてます。

サンプル(codepen)

tailwindcssの冗長性問題の解決

これはかなり前から言われていますが、まず使ってると いずれ慣れます。

けど最低限のクラス名などはつけたほうが無難かと思います。例えばsectionや内部の情報のまとまりの大枠(outerに相当する要素)にouterなんちゃらとつけることぐらいはやっています。

先程のsectionの例でいうと
・sectionにidはつける
・タイトルを囲うdivはout_titleとつける。(out_card、out_desc、のように関連する名を_後ろにつける)

みたいなちょっとしたルールを作るだけで良いと思います。

<section id="SectionName">
  <div class="inner px-[1rem] sm:px-[2rem] py-[4rem] md:py-[8rem] bg-gray-200">
    <div class="out_title max-w-screen-xl mx-auto text-center">
      <h2 class="text-3xl font-bold pb-4 md:pb-8">タイトルタイトル</h2>
      <p class="">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</section>

Prettier plugin for Tailwind CSSを使用する

これはtailwindcssのクラスを規則に則って並べ替えてくれます。自分はこれ使わなくても自然に出来てるので使ってないのですが、チームでやる場合は入れるといいと思います。並べ方の規則は「カスタムクラス > ベースレイヤークラス > コンポーネントクラス > ユーティリティクラス」の順番で記述するといいと言われています。

詳しくは公式ページへどうぞ
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier

<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>

<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>

なお、@applyでCSSファイルにtaiwindcssを記述する方法もありますが、現在は非推奨になっています。

参考：
https://www.ushironoko.me/posts/tailwind-apply-dame

よく言われる問題

問題: インライン記述と同じじゃね？

=> 違います
Tailwind CSSは普通のプロパティを持ったクラスです。設定はCSSファイルに記述されているので共通class名で利用します。(やらないですが)元のスタイルを変更すれば、そのclass名を記述したものはすべて変更が反映されます。インライン記述は直にスタイル設定をタグに書くやり方なので一つ一つ修正しなければなりません。

=> インラインスタイルと言う意味では同じです
HTMLファイルにスタイル要素を書き込んでデザインを行う意味では同じですが、記述するのはあくまでクラス名で、style属性のようにプロパティは直書きしません。また、style属性ではレスポンシブデザインや疑似要素まで再現できないですが、tailwindcssは可能です。

問題: Bootstrapとは違うの？

=> 似ています
モダンなBootstrapはとても良く似ています。あえて言えばBootstrapはコンポーネントが充実しており、そのためのclassが用意されていますが、Tailwind CSSにはありません。その代わり、classを組み合わせて同じようなものを作ることは可能です。

例えばボタンを作る場合

Bootstrap

<button type="button" class="btn btn-primary">Primary</button>

Tailwind CSS

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Primary
</button>

このようにBootstrapは一つのクラスに多くのプロパティが設定されており、2,3個のclassを付ければよいですが、Tailwind CSSは色、大きさ、形、margin、paddingなど一つ一つ設定しなければなりません。

このことから

Bootstrap => 少ないclassですっきり。細かいカスタマイズが難しい。
Tailwind CSS => 設定するclassは多い。細かいカスタマイズの自由度がある。

と言えます。ただ、Tailwind CSSにもコンポーネントの概念があり(Extracting CSS components: 通称@apply)、これは後述します。

以下続きます。

コーディング時に出くわす問題

問題: クラス名が多すぎてわからない

=> チートシートを使います
Tailwind CSSの独特のclass名なんかはチートシートを使って調べます。覚えろって話ですが多すぎて無理なので。
https://nerdcave.com/tailwind-cheat-sheet
(上記は古いバージョンのまま更新されないのでこちらが良いです)
https://tailwindcomponents.com/cheatsheet/

=> でもやっぱり公式ドキュメントが正確です
https://tailwindcss.com/docs/utility-first

問題: Tailwind CSSのクラス名が冗長になる

=> @applyを使います
非推奨になりました。本記事の「tailwindcssの冗長性問題の解決」を参照ください

レスポンシブ対応に出くわす問題

レスポンシブは以下のような使い方をします。

html
<img class="w-16 md:w-32 lg:w-48" src="...">
<!–-
w-16 => mdで設定した横幅以下
md:w-32　=> mdで設定した横幅以上になったらw-32(width: 8rem;)
lg:w-48　=> lgで設定した横幅以上になったらw-48(width: 12rem;)
-–>

smやmdといったデフォルト値は以下になります。

Breakpoint prefix	Minimum width	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }

https://tailwindcss.com/docs/responsive-design

問題: ブレイクポイント変えたい

=> tailwind.config.jsをいじります
例えばsmは640pxがデフォルトですが変えたい場合、screensに追加します。screensはもともと記述されていません。追加する場合はsmだけでなく、他のプロパティも記述しないと動作しないようです。

module.exports = {
  purge: ['./src/**/*.html', './**/*.php'],
  darkMode: false,
  theme: {
    screens: {
      sm: '640px', // ここを変更
      md: '768px', // ここは追加
      lg: '1024px',　// ここは追加
      xl: '1280px'　// ここは追加
    },
  },
  variants: {},
  plugins: [],
};

問題: ブレイクポイント増やしたい

=> tailwind.config.jsをいじります
自分のやり方はTailwind CSSのデフォルトは残しつつ、カスタマイズ版を追加します。

js
module.exports = {
  purge: ['./src/**/*.html', './**/*.php'],
  darkMode: false,
  theme: {
    screens: {
  　　　　  // --------------------------------------------------
      // custom settings
      // --------------------------------------------------
      
      sp: '428px', // スマホサイズを追加
      maxsp: { max: '427px' }, // maxも追加
      sptb: { min: '428px', max: '559px' }, // min-maxを追加
      
      tb: '600px', // タブレットサイズを追加
      maxtb: { max: '599px' },
      tbpc: { min: '600px', max: '1023px' },

      maxpc: { max: '1023px' },
      pc: '1024px',
      
   　　　　 // --------------------------------------------------
      // tailwind default
      // --------------------------------------------------
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px'
    },
  },
  variants: {},
  plugins: [],
};

どんなサイトに向いてるか、向いていないか問題

どんなサイトに向いてるかと言うとやりようによってはどんなサイトでも向いています。 なので突出してるものや注意が必要なものを挙げておきます。

プロトタイプ

=> 向いています
なにかサービスのプロト版作るならもうこれはとにかく早いです。

通常のサイト

=> いくつか注意事項があります
新規ではなく既存サイトに手を入れる場合、また独自のTailwind CSSもどきがある場合は既存プロパティとバッティングするため調整に時間がかかり無駄な時間を作ってしまうためやめたほうが良いです。

ビルドツールを使えないサイト

=>今は向いています
ネットショップやブログサービスなど、管理画面上でhtmlを記述するもの。以前はcssのみTailwind CSSを読み込ませて開発し、完成したらhtmlをビルドツールにコピペしてそこにできたcssを上書くみたいなことやってましたがは今ではcdn以下jsファイルを読み込ませるだけで良いようです。

<script src="https://cdn.tailwindcss.com"></script>

https://tailwindcss.com/docs/installation/play-cdn

最後に

tailwindcss VS HTMLCSS

さてこれはちょっと最近思ったことなので少し長めですが、tailwindcssは賛否両論あるのはご存知かと思います。ちょっと整理します。

そもそもHTMLは文章構造を定義、デザインはCSSに、これが鉄則と言うのがあり、tailwindcssのやり方はその意図に反しているためX(旧Twitter)上で議論がなされてるのを見かけます。海外も結構見かけます。HTMLとCSSを分けるというやり方は2000年代に登場しました。

昔CSS ZEN GARDENというサイトがあって。。。(なんと今でもありました)
https://www.csszengarden.com/

これはテーブルデザイン(※)が主流だった当時、これからのWebデザインは文章はHTMLファイル、デザインはCSSファイルに分けましょうね。という考え方を証明すべく、1つのHTMLに対しCSSファイルだけを入れ替えるだけでこんなにデザイン変わるんですよ、というのを世界中のデザイナーが構築して見せあったサイトです。当時CSSのプロパティだけでHTML構造を変えずこんなにデザインをいくつも表現できるんだと衝撃を受けたほどです。

世界で一番使われているCMSのWordPressはまさにそのコンセプトを引き継いでいて、HTMLとテーマを分け、テーマファイルを変えればブログはそのままでデザインががらっと変える事ができるのは今では珍しくありませんよね。

このような流れで来ているので当然tailwindcssのHTMLファイルにデザイン要素を盛り込むやり方はその時代を知ってる人には眉をひそめる人もいるということです。

まあここからは私個人の意見ですが、当然ながら目的に応じで使い分けるのがいいと思うんですよ。で、私の場合は目的で決めるとtailwindcssで事足ります。例えばHTMLとCSSを分けると検索エンジンが解析しやすいって言われてましたけど、別にtailwindcssやBootstrapで書かれても問題ありませんよね。

今はHTMはどちらかと言うとコンポーネント指向で再利用しやすいパズルのピースのように組み合わせて使うことが多くなってきました。そのようなメリットを捨ててまで昔のやり方にこだわるかと言うと私はこだわりはありません。

ただ、我は通さず、チームでやることになり、チームがHTMLCSS分離するやり方ならそれに合わせます。まあもちろん布教はしますが(笑)

以上です。

(※)テーブルデザイン
HTMLタグのtableタグをレイアウトに使ってHTML内でデザインする方法。CSSデザインをする前はみんなこの方法でやっていた。CSSプロパティの解釈も当時のブラウザでは曖昧で、CSSを使うとデザインが崩れたりして使い物にならなかった。そういう背景を知らずとも、デザインはテーブルを使うのが常識になっていた。

よく使うtailwindcssのTips

というわけで私の場合はtailwindcssの良いところをどんどん見つけ、Web制作者に情報発信をして行く方に集中したいんですが長くなったのでページを分けたいと思います。

Discussion