以下サイト(Youtube)を参考に作業

https://youtu.be/82cN8zwDhbY
まんまこれを実践しただけですが、作業概要＋学びを書いておきます。

vite tailwind reactを検索

Viteはnpmやyarnよりも更に起動速度が速くなったビルドツールです。

ははーんおじさん全然わからんけどパッケージ的なやつでいいのかな？

npm create vite@latest react-twndcss-pj -- --template react

みたいな感じ。

npm install -D tailwindcss postcss autoprefixer

postcss autoprefixer
installのオプションで、postcssでプレcss系のコンパイル的なことをしてくれる。そのうえでautoprefixerはオートプレフィクス(ブラウザ間ハックのやつ。-webkit的な)をしてくれる。
インストール時にこれをやっておくだけで、実際の記述はシンプルにベースのcss書くだけで良いみたい。すげー。

npx tailwindcss init -p

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

生成されたtailwind.config.jsに上記の記述を追加し、jsやtsxなどを反応させる。

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

これでtailwindのプロパティをclassNameに記述するとそれが反応してコンパイルされ、cssが出力される。

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などは省略っぷりがエグい上、直感的で明瞭。素晴らしい。

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);

回ごとのテーマが複数あって混在してると学習の軸がぶれて効率が悪い気がしてきた。今回だとtailwind、vite(npm)、React(実は次回も混在してる)。
今のところTwitterBootstrapとの違いが分からない。メリデメ比較したい
mx-auto、py-autoあたりは便利だなあ。flex、justify-content:between、align-items:centerあたりもワンタッチでなんとかできん？VSCodeのスニペットみたいなノリで。

Reactでtodoアプリ作ります。
サンプルアプリあるあるらしいのを作ったあと知って萎えてる笑