Tailwind CSSを使う時に出くわす問題
この記事はリライトしました。こちらをどうぞ
前置き
私がTailwind CSSと出会ったのは2018年頃でした。当時はCSSの組み方を模索していて、どうすれば効率が良いかなど考えてたところ、よく使うクラス群を作ってcommonファイルとして使ってました。が、class名が気に入らなかったり何度も作り直しているうちにめんどくさくなって何かいいのないかなと探してたら運命の出会いをしました。Tailwind CSSは私が今まで行ってたやり方と全く同じコンセプトで作られていました。その時発した言葉を今でもよく覚えています。「あーもうこれでいいじゃん」
で、今まで使ってみた結果いろんな問題に出くわしたのでシェアします。ただ、我流が多いのでなんかもっといい方法あるぜという方教えて下さい。
(軽く説明)Tailwind CSSとは
ユーティリティファーストのCSSフレームワークです。沢山のclassが用意されています。
例えば
↓にフォントの大きさをスタイルを当てる場合
<h1>Tailwind CSS</h1>
通常の場合
font-30というclassをcssファイルに設定してからhtmlに記述
css
.font-30 {
font-size: 30px;
}
html
<h1 class="font-30">Tailwind CSS</h1>
Tailwind CSSの場合
text-3xlというclassが予め用意されている
<h1 class="text-3xl">Tailwind CSS</h1>
このようにプロパティが沢山詰まったclass群になります。(もちろんそれだけではないです)
Tailwind CSSの流行
世界だと2019年の6月ぐらいから伸びてきています。スタンダードになってるかは別ですが、そこから落ちることもなく右肩上がりなので安定したライブラリであることが伺えます。
日本は2020年の11月ぐらいからですかね。ジグザグしていて安定していないので迷いが生じているようです？
はてなブックマークなど見ると時折Tailwind CSS関連の記事が人気エントリされますが、これっていいのか？みたいなコメントが付いてたりします。もうかなり前からあるんだから試してみればいいのにとは思いますが、まあこれらのコメントを参考に迷っている点を解消できればなと思います。
よく言われる問題
問題: インライン記述と同じじゃね？
=> 違います
Tailwind CSSは普通のプロパティを持ったクラスです。設定はCSSファイルに記述されているので共通class名で利用します。(やらないですが)元のスタイルを変更すれば、そのclass名を記述したものはすべて変更が反映されます。インライン記述は直にスタイル設定をタグに書くやり方なので一つ一つ修正しなければなりません。
問題: 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名なんかはチートシートを使って調べます。覚えろって話ですが多すぎて無理なので。
問題: Tailwind CSSのクラス名が冗長になる
=> Extracting CSS components with @applyを使います
例えば以下のようなボタンを作る時は
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
この長いclassは
@applyでまとめられます
<button class="apl_btn">
Button
</button>
.apl_btn {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded
}
※ただし、@applyに自分が設定したクラス名を反映させることはできません
問題: @applyでまとめてもまだ冗長なんだけど？
=> 提案があります
ここは独自ルールですが、私は数値調整がいるものはCSSファイルに記述、数値調整のいらないものはhtml上に記述する方針にしています。
CSSファイルに記述 => 数値調整がいるもの
marginやpadding、font-sizeなどです。これらはいくつも設定をする必要があり煩雑になる原因なのでCSSファイル内で行います。なおTailwind CSSではpxゃremで指定しているものがほとんどで、レスポンシブ対応では欠かせないvwが単位としてまだ使用されていないので(2022年3月現在)、これらの設定も含め、CSSファイルに記述する事が無難です。
html上に記述 => 数値調整のいらないもの
absolute、relative、hidden、block、inline-block、flex関連、また、p-0やw-full、h-screenなど0や100%、100vh、フォント名や書体など決まりきってるものも含みます。大まかなレイアウトをするにはhtmlタグにこれらclassを記述したほうが編集が早いです。
以下踏まえたサンプルです。class名は自分なりに置き換えてください。
html
<!-- out_hero-titleというブロックのrootクラス名は必ずつける。CSSファイルに記述する場合に使用 -->
<div class="out_hero-title maxpc:text-white w-full h-screen flex justify-center items-center">
<div class="outer">
<div class="el_logo text-center"><!-- el_logoはCSSファイルに記述する場合に使用 -->
<h1>サンプル</h1>
<p class="italic">Tailwind CSS</p>
</div>
<div class="out_title-menu"> <!-- ut_title-menuはCSSファイルに記述する場合に使用 -->
<p>メニュー1</p>
<p>メニュー2</p>
</div>
</div>
</div>
css
(すいません、コード簡略化するためにscssファイル形式(ツリー式)で掲載します)
.out_hero-title {
.el_logo {
padding-bottom: 1.66667vw;
h1 {
font-size: 3.57143vw;
line-height: line-height: 3.09524vw;
}
p {
font-size: font-size: 5.33333vw;
}
@media only screen and (max-width: 1023px) {
h1 {
font-size: 4.26667vw;
line-height: 12.53333vw;
}
p {
font-size: 4.26667vw;
}
}
}
.out_title-menu {
writing-mode: vertical-rl;
line-height: line-height: 3.57143vw;
@media only screen and (man-width: 1023px) {
p {
font-size: 4.26667vw;
line-height: 12.53333vw;
}
}
}
}
レスポンシブ対応に出くわす問題
レスポンシブは以下のような使い方をします。
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) { ... }
問題: ブレイクポイント変えたい
=> 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>
以上、他にも色々あったはずなんですがTailwind CSSも今やバージョン3に進化し、その過程で解決されることがありますので、また何か出てきたら更新すると思います。
Discussion