白状しよう。俺は汎用機の技術者だ。
画面はテキストベース、80桁×24行の世界で生きてきたのさ。
そんな俺に向かって、cssだって？レスポンシブルだって？誰に向かって口きいているんだ。画面上の桁を合わせたきゃ、スペース入れとくんだな。
…なんて言って済んでいる時代はもう終わってしまったよ。グッバイ、古き良き時代。これからは俺も時代の波に乗って、tailwindcssでフロントエンド技術者さ…。
てか、laravelがver8からbootstrapでなくてtailwind使うようになったんで、ちょっくら調べてみようってだけのことなんだけどね。ちょっとハードボイルドタッチで始めてみました。
例によってゆるーく使えるようになればいいか、と。
それじゃーとりあえずやっていこー。れっつとらい。
１．分析してみる
どこにでも書いてあるように、bootstrapはそのままで使えるデザインが仕上がっているけれど、tailwindはcssひとつ分の指定しかされていない。
逆に言えば、cssで定義していたものがひとつのクラスに定義されているから、それを組み合わせていけば、あなた好みのデザインに染まります、ってことだ。例えが昭和な感じだね。
<button
class="inline-block
px-6
py-2
text-xs
font-medium
leading-6
text-center
text-white
uppercase
transition
bg-blue-700
rounded
shadow
ripple
hover:shadow-lg
hover:bg-blue-800
focus:outline-none">
BUTTON
</button>
敢えてclassひとつずつで改行してみました。こんなにたくさん指定しているんだね。
ちなみにこの設定でできるボタンがこれ。
面倒だけど、最初だからひとつずつ見てみるよ。
| tailwindの書き方 | cssの書き方 | 内容 |
|---|---|---|
| inline-block | display: inline-block; | インラインブロック要素の指定をする |
| px-6 | padding-left: 1.5rem;padding-right: 1.5rem; | 左右のpaddingを設定 |
| py-2 | padding-top: 0.5rem;padding-bottom: 0.5rem; | 上下のpaddingを設定 |
| text-xs | font-size: 0.75rem;line-height: 1rem; | フォントサイズと行ボックスの高さを指定 |
| font-medium | font-weight: 500; | フォントの太さを指定 |
| leading-6 | line-height: 1.5rem; | 行の高さを指定 |
| text-center | text-align: center; | テキストを中央に揃える |
| text-white | --tw-text-opacity: 1;color: rgba(255, 255, 255, var(--tw-text-opacity)); | テキストの色を白にする |
| uppercase | text-transform: uppercase; | すべての文字を大文字にする |
| transition | transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms; | 時間的変化を指定する |
| bg-blue-700 | --tw-bg-opacity: 1;background-color: rgba(29, 78, 216, var(--tw-bg-opacity)); | 背景色に青700を設定する |
| rounded | border-radius: 0.25rem; | 角を丸める |
| shadow | --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); | boxに影をつける |
| hover:shadow-lg | --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); | オンマウスの時の影の設定 |
| hover:bg-blue-800 | --tw-bg-opacity: 1;background-color: rgba(30, 64, 175, var(--tw-bg-opacity)); | オンマウスの時の背景色を青800に指定 |
| focus:outline-none | outline: 2px solid transparent;outline-offset: 2px; | フォーカスしたときのアウトラインを指定する |
…長かった。やめればよかった。ボタンひとつにこのありさまだよ。
とはいえ、裏を返せばこういうボタンを作るにはこれだけの設定が必ず必要になるわけで、それをcssでやるのかbootstrapがやってくれるのかtailwindでやるのか、っていう違いだけだ。どこにがっつり書きましょうか、ってことだね。
２．どんなclassがあるの？
公式見ろや（日本語版はこっち)、ってことになるんだろうけど、いきなり公式見るのってハードル高いっていうか、まだ心の準備ができてないっていうか、最初は優しくしてほしい、って誰もが思うでしょ？
だからさわりだけちょっと教えてよ、って声にお応えして。
| class名 | 概要 |
|---|---|
| .container | max-widthをブレークポイントに合わせたサイズに設定する。 |
| .block | display: block;を設定する。 |
| .inline | display: inline;を設定する。 |
| .inline-block | display: inline-block;を設定する。 |
| .grid-col-n | グリッドを設定する。_n_は1~12とnone。 |
| .p-n | paddingを設定。_n_の値がサイズになる。 |
| .px-n | 左右に同じサイズのpaddingを設定する。_n_の値がサイズになる。 |
| .py-n | 上下に同じサイズのpaddingを設定する。_n_の値がサイズになる。 |
| .pt-n | padding-topを設定する。_n_の値がサイズになる。 |
| .pb-n | padding-bottomを設定する。_n_の値がサイズになる。 |
| .pr-n | padding-rightを設定する。_n_の値がサイズになる。 |
| .pl-n | padding-leftを設定する。_n_の値がサイズになる。 |
| .m-n | マージンを設定。_n_の値がサイズになる。 |
| .mx-n | 左右に同じサイズのマージンを設定する。_n_の値がサイズになる。 |
| .my-n | 上下に同じサイズのマージンを設定する。_n_の値がサイズになる。 |
| .mt-n | margin-topを設定する。_n_の値がサイズになる。 |
| .mb-n | margin-bottomを設定する。_n_の値がサイズになる。 |
| .mr-n | margin-rightを設定する。_n_の値がサイズになる。 |
| .ml-n | margin-leftを設定する。_n_の値がサイズになる。 |
| .w-n | widthを設定する。_n_の値がサイズになる。 |
| .h-n | heightを設定する。_n_の値がサイズになる。 |
| .tx-xx | テキストのサイズを指定する。_xx_はxs,sm,lg,xlなど。 |
| .leading-n | 行の高さを設定する。_n_は3~10、none、tight、等 |
| .text-right | テキストを右詰めする。 |
| .text-center | テキストを中央寄せする。 |
| .text-left | テキストを左詰めする。 |
| .text-xxxx-nnn | テキストの色を設定する。_xxxx_は色の名前（redとかblueとか）、_nnn_は色の濃さ（100~900で100刻み、大きい数字の方が濃い）。但し、blackとwhiteは色の濃さの指定がない |
| .bg-xxxx-nnn | 背景色を設定する。_xxxx_は色の名前（redとかblueとか）、_nnn_は色の濃さ（100~900で100刻み、大きい数字の方が濃い）。但し、blackとwhiteは色の濃さの指定がない |
| .rounded | 角を丸める。後ろに-smや-mdなどをつけると、丸みの大きさが変わる。 |
大体cssで設定できる奴とイコールだから、もうなんとなくわかるよね。
あとは、こいつらをどんどん設定していけばいいのさ。
保間にもいろいろ設定できるし、自分でclassを作ることもできるけど、今日のところはこの辺で勘弁してやるよ。
いつかまた続編書くかもね。
その時まで、アウフ・ヴィターゼン！