🍃

TailwindCSSを始めようとしている人へ

2022/03/06に公開
3

TailwindCSSを始めようとしている人へ

JSフレームワーク内でスタイルをどのように当てるべきかは,多く議論されるものであるが,そんな中でTailwindCSSが注目と人気を集めている様子である.

それはそうと私はなかなか使うまで踏み出せなかったが,v3.0以降にようやく使ってみたので,

  • 使い方をざっくり知りたい人
  • できることをざっくり知りたい人
  • TailwindCSSをエアプしたい人

に向けて個人的な所感と要点を書いていく.

TailwindCSSをすごく簡単に

classNameに特定のclassを指定することでStyleを当てていくCSSフレームワーク.

https://tailwindcss.com/

例えば,ここにあるように,

bg-red-600とclassNameをつけることで,CSSのbackground-color: #dc2626;と同様のCSSプロパティを当てたことになる.

普段このように書くところを

<div class='container'></div>
.container {
  width: 10rem;
  height: 10rem;
  background-color: #dc2626;
}

TailwindCSSでは

<div class='w-10 h-10 bg-red-600'></div>

となる.

このように原則class一つにつき,一つのCSSプロパティがあたるのが基本だが,

セットで使用されるプロパティに関しては使用しやすいように複数のCSSプロパティが当たることもある感じ.

例えば,animate-spinをclassに追加すると回り続けるAnimationを簡単に実装することができる.

もう一つの特徴として

これは内部に膨大なCSSファイルがあるのかーと想うかもしれないが,TailwindCSSは使用されているclassNameを検知して,必要最低限のCSSのみを生成する仕組みになっている.へーすごい.

今回作ったWebサイト

3日ほどでNext.js × TailwindCSSでWebサイトを作った.

TailwindCSSのみを使用しStyleし,それほど高度な運用もせずに,単にclassNameを追加することによるスタイリングのみでサイトを作成していった.

https://proglab.nbr41.com/

使って思ったメリット

  • 学習コストが低い
  • 手軽で簡単にスタイリングできる
  • Web制作中級者あたりが使うと,知らなかったCSSプロパティに出会えて勉強になる
  • どのHTMLタグにどのCSSがあたっているかが明確で認識しやすい
  • アニメーションを簡単につけれる

使って思ったデメリット

  • 当たり前だが,自由度が狭い(これでもかなり広くなったとは思う)
  • 初学者はこれを使うことで,理解の幅や伸びしろを失うことになりそう
  • classNameが冗長になる
  • モバイルファーストのレスポンシブに慣れていないとつらい

といったところでしょうか.

classNameが冗長になるのは使う前から気になっていたのですが,それ以上に開発体験が良く気にならない.また,そもそも記述するCSSがなるべく少なくなるようにコーディングするので,それほど冗長にはなりませんでした.

あたりまえですが,CSS初心者が使うことは学習最適化的な観点からはおすすめできません.

TailwindCSSの使い方まとめ

要点だけさくっと抑えてすぐに使いたい人のためにNext.jsでのSetup方法を簡潔にまとめていく.

※ v2.x と v3.x のバージョンではいろいろ異なるので注意

参考:https://tailwindcss.com/docs/guides/nextjs

Next.js の プロジェクトの作成

yarn create next-app my-project

TailWindCSS の 初期設定

install

yarn add -D tailwindcss postcss autoprefixer

設定ファイルを自動生成

npx tailwindcss init -p

postcss.config.jstailwind.config.jsが作成される

そしたらtailwind.config.js内の content を以下のように変更編集
※src を使用しない場合は./components/**/*.{js,ts,jsx,tsx}とかで OK.ここにはclassNameでStyleするファイルのpathを記述する感じ.

  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

次にstyles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

を追記

これでTailWindCSSによるStylingが可能になる.

CDNでやる場合

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

v3.0からCDNに対応した.これをHTMLに追記して読み込ませるだけでできるので,HTML/CSSを学んだばかりの人でもすぐに使い始めることができるっちゃできる.

個人的にはTailwindCSSを使う前にWebサイト普通に作れますくらいにCSSをちゃんと学んだ方がいいと思うので,Web制作の初学者にはおすすめしない.

要点をまとめていく(CSSを理解している人向け)

先に高頻度で使用する記号を紹介する.

詳細に知りたい人は公式でどうぞ.

https://tailwindcss.com/docs/installation

大きさ系

pxに単位で指定する必要のあるプロパティは以下の数字を複合して使用する

サイズ:xs, sm, md, lg, xl, 2xl, 3xl, ... ,9xl

数字:0〜12, 14, 16, 20〜64, 72, 80, 96

(1単位に付き4px | 例:8は8*4で32pxを指す)

(1〜12は1刻み, 20〜64は4刻み)

https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale

※ものによってはこれ以外もある

これは色の名前

色名:slate, gray, red, yellow, orange, blue, ...

濃さ:50, 100, 200, 300, 400, 500, 600, 700, 800, 900

この2つを複合する

々ある

https://tailwindcss.com/docs/customizing-colors


それでは,よく使いそうなTailwindのプロパティを紹介していく

widthとhight

w-[大きさ(数字)など]

%はw-1/2のようにして示す

他に

  • px...1px
  • auto...auto
  • full...100%
  • screen...100vw
  • min...min-content
  • max...max-content
  • fit...fit-content

などがある.

v3.0からw-[41px]のようにすれば何でもいけるようになった

heightも一緒

例:w-40,h-screen

前にmax-min-をつければmax-widthmin-widthとなるのだが,

max-heightのみ 大きさ(数字)が使用できて,他は大きさ(サイズ)だったりするので注意.

https://tailwindcss.com/docs/width

余白

m[余白の位置]-[大きさ(数字)]

px...1px

%やremはない

余白の位置は上,下,左,右,左右,上下の順にt,b,l,r,x,y(頭文字)

何もつけなければ全部

paddingも同じ

例:mt-20,py-8

https://tailwindcss.com/docs/padding

文字の大きさ

text-[大きさ(サイズ)]

大きさは,

xs, sm, base, lg, xl, 2xl, 3xl, ... ,9xlmdbaseなので注意

例:text-xl

https://tailwindcss.com/docs/font-size

文字色

text-[色名]-[濃さ]

透明にしたいとき

text-[色名]-[濃さ]/[%を表す数字]みたいな感じでいける

例:text-rose-500,text-sky-500/80

https://tailwindcss.com/docs/text-color

背景色

bg-[色名]-[濃さ]

文字色と一緒

例:bg-rose-500,bg-sky-500/80

https://tailwindcss.com/docs/background-color

色に関してはこんな感じでインプットすると良き

対象 濃さ
text red 50
bg orange 100
border lime 200
outline green 300
shadow sky 400
accent violet 500
... pink 600
rose 700
... 800
900

display

プロパティをそのまま指定すればOK

例:block,inline,inline-block,flex,grid

hiddendisplay: none;

https://tailwindcss.com/docs/display

flexboxに関するプロパティ

justify-content

justify-[なんたら]

例:justify-start,justify-between

align-items

items-[なんたら]

例:items-center

flex-direction

例:flex-row,flex-col,flex-col-reverse

flex-wrap

例:flex-wrap,flex-nowrap

gap

例:gap-4

flexとgapの組み合わせが最強

position

例:absolute,relative,fixed

Top / Right / Bottom / Left の指定

[方向]-[大きさ数字]

insetinset-xなどで全方向や上下,左右の指定もできる

例:top-0,right-20, inset-y-40

https://tailwindcss.com/docs/top-right-bottom-left

Opacity

opacity-[数字]

数字は0から10刻みで100までと5,25,75,95がある

例:opacty-60

https://tailwindcss.com/docs/opacity

border-radius

rounded-[方向]-[大きさ(サイズ)]

例:rounded-xl,rounded-b,rounded-tr-md

https://tailwindcss.com/docs/border-radius

box-shadow

shadow-[大きさ(サイズ)]

大きさ(サイズ)以外になし,inner,noneがある

他にnoneとinnerがある

前にdrop-をつければDrop Shadowになる

例:shadow-xl,shadow,drop-shadow-md

https://tailwindcss.com/docs/box-shadow

その他ざっくり紹介

文字太く...font-bold

真ん中寄せ...text-center

カーソル乗っけたら指になるやつ...cursor-pointer

子要素の最初の要素以外に対して等間隔になるようにmargin-topをつけてくれる...space-y-8

その他の機能

レスポンシブ対応

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

各clasNameの最初にmd:, lg:などをつけるとmax-width: 480px的なやつになる
ただ,モバイルファーストのレスポンシブになるので注意
例:bg-green-400 sm:bg-blue-400 md:bg-red-400を全て指定すると

画面幅 適応される色
〜640px green
640~768px blue
768px~ red

となる.

モバイルファーストに慣れていないと直感的でない感じがする...

installするだけでPrettierにclassNameをsortさせる

https://tailwindcss.com/docs/adding-custom-styles

Tailwind にないスタイルを使いたい場合

https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities

TailWind CSS のスタイル層には
base > components > utilities があるので意識しておくとよい

Discussion

Yu InaoYu Inao

こんにちは! Tailwind CSS 良いですよね。習熟度に応じて効率が非線形で上がっていく、そんなフレームワークだと思います。

デメリットとして挙げられていた点で、勝手ながら私見を共有させてください!

  • 当たり前だが,自由度が狭い(これでもかなり広くなったとは思う)
  • 初学者はこれを使うことで,理解の幅や伸びしろを失うことになりそう

自由度に関しては、ユーティリティーファーストの「制約によるデザイン」のトレードオフですので、これこそ Tailwind CSS を利用する利点とも考えられます。

制約によるデザイン インラインスタイルを当てる場合、すべてのスタイル指定がマジックナンバーとなります。ユーティリティーを使うことで、定義済みのデザインシステムから、スタイルを「選ぶ」ことで視覚的に一貫した UI をより簡単に組み立てることができます。

CSS を知らない初学者にとっては、応用から基礎を学ぶようなものだと思います。なので個人開発においては、自身の学習に適した抽象度で学ぶべきでしょうし、CSS を知らないのなら、まずは素の CSS で実装してみる方が良いと思います!

Tailwind CSS は、一貫した抽象度をチーム開発に与えてくれるフレームワークなので、チームでスタイリングをする時の、「共通言語」として、より効果を発揮する選択肢なんじゃないかと思います。

  • モバイルファーストのレスポンシブになれない

Tailwind CSS はモバイルファーストアプローチに対応しています!

<!-- この場合、モバイルではテキストが中央寄せとなり、640px 以上のスクリーンでは左寄せとなります -->
<div class="text-center sm:text-left"></div>

ドキュメントの通り screens 接頭辞を指定するのを PC デバイスのような高解像度スクリーンとし、接頭辞ナシのデフォルト指定をモバイル解像度とすることで、モバイルファーストのスタイリングアプローチが取れます。

Knob/のまど先生Knob/のまど先生

コメントありがとうございます!
おっしゃるとおりスタイルの方針に一貫性が増すのは良いですね!
個人開発では気が付きませんでした🙉

また,「モバイルファーストのレスポンシブになれない」という表現は誤解が多く不適切なため,
「モバイルファーストのレスポンシブに慣れていないとつらい」に変更させていただきました🙇‍♂️