以下サイト(Youtube)を参考に作業
https://youtu.be/82cN8zwDhbY
まんまこれを実践しただけですが、作業概要＋学びを書いておきます。
vite tailwind reactを検索
viteとは
Viteはnpmやyarnよりも更に起動速度が速くなったビルドツールです。
ははーんおじさん全然わからんけどパッケージ的なやつでいいのかな？
pjフォルダ作成
npm create vite@latest react-twndcss-pj -- --template react
- npm create vite@latest
- viteの最新版で環境作成
- --template react
- Reactテンプレを使って
みたいな感じ。
tailwindCSSインストール
npm install -D tailwindcss postcss autoprefixer
- postcss autoprefixer
installのオプションで、postcssでプレcss系のコンパイル的なことをしてくれる。そのうえでautoprefixerはオートプレフィクス(ブラウザ間ハックのやつ。-webkit的な)をしてくれる。
インストール時にこれをやっておくだけで、実際の記述はシンプルにベースのcss書くだけで良いみたい。すげー。
npx tailwindcss init -p
- -p
-postcssの略で、これを指定するとインストール時にtailwind.config.jsを生成してくれる。
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
生成されたtailwind.config.jsに上記の記述を追加し、jsやtsxなどを反応させる。
src/index.cssからtailwindのインポート
@tailwind base;
@tailwind components;
@tailwind utilities;
これでtailwindのプロパティをclassNameに記述するとそれが反応してコンパイルされ、cssが出力される。
tailwindの1stインプレッション
直感的で覚えやすいやつ
| tailwind | CSS |
|---|---|
| absolute | position:absolute; |
| bg-white | background-color:white; |
| font-bold | font-weight:bold; |
| bottom-0 | bottom:0; |
| box-border | box-sizing:border-box; |
| gap-4 | gap:4px; |
| p-6 | padding:6px; |
| text-center | text-align:center; |
便利で恩恵を感じるやつ
| tailwind | CSS |
|---|---|
| mx-auto | margin-inline:auto; |
| px-4 | padding-left:4px;padding-right:4px; |
| py-8 | padding-top:8px;padding-bottom;8px; |
px-4などは省略っぷりがエグい上、直感的で明瞭。素晴らしい。
何か微妙に感じるやつ
- items-center
- fl-y-autoとかcol-centerとか
- justify-between
- justify-center
- jst-btwn、jst-cntrとか
- flex
- flex-col
- flex-wrap
- flx、flx-col、flx-wrとか(微妙かｗ)
意味はわかるけど一瞬考えてしまうやつ
- md:flex-row
- lg:grid-cols-3
- mdとかlgのブレイクポイントがわからん
- bg-gray-100
- text-gray-600
- "gray"がどの程度の色相なのか
- 100がどの程度の彩度なのか
- grid
- grid-cols-1
- シンプルにgrid慣れてない
- text-2xl
- text-4xl
- 素のcssでもx-largeとかって使ったことないし、2xlと4xlがそれぞれどのくらいの上げ幅なのかがわからん
- w-full
・width:100%とか100vwってこと？
わからんやつ(さすがに調べた)
- h-screen
- height:100vh
- containertailwindcss.com
- デフォルトでwidth:100%、あとはブレイクポイント毎にmax-widthが切られるみたい。
- rounded-lg tailwindcss.com
- 大きめ(感覚ｗ)の角丸(border-radius)。-lg0は.5rem(≒8px)
- rounded-sm＜rounded＜-md＜-lg＜-fullの順に大きくなり、-fullは100%
- shadow-mdtailwindcss.com
- こちらも中程度の影(box-shadow)。具体的には以下のよう(AI談)
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
成果物
- 今更だけどこれって意味あるのか…？
- htmlで見れないのかな？
所感とか
- 回ごとのテーマが複数あって混在してると学習の軸がぶれて効率が悪い気がしてきた。今回だとtailwind、vite(npm)、React(実は次回も混在してる)。
- 今のところTwitterBootstrapとの違いが分からない。メリデメ比較したい
- mx-auto、py-autoあたりは便利だなあ。flex、justify-content:between、align-items:centerあたりもワンタッチでなんとかできん？VSCodeのスニペットみたいなノリで。
次回予告
Reactでtodoアプリ作ります。
サンプルアプリあるあるらしいのを作ったあと知って萎えてる笑