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

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.jsとtailwind.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-widthやmin-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, ... ,9xlとmdがbaseなので注意

例：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

hiddenはdisplay: 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 の指定

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

insetやinset-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 があるので意識しておくとよい