PHP＋MySQL+TailwindcssV4.1でサイトを作ろうと思った
前職でPHPの経験があったので、リハビリ代わりにPHPを使ったサイトを作ることにした。
とりあえず、XAMMPで開発するので、DBはMySQL
CSSフレームワークは前職で触っていたBootstrapを使おうかな？と思ったけれど、
調べると、独学してた時に使っていたNuxt.jsの教本で出てきたTailwindcssの方が今は人気っぽい？？
PHPフレームワークはLaravelを使おうかと思ったけれど、素のPHPでどこまで勝負できるかやってみたかったので、
PHPフレームワークはなしで作ることに。
途中で投げないように頑張ります。
エックスサーバーを借りているので、PHPとMySQL（PhpMyAdmin）を建てたら、
別の記事で作り方を紹介しようと思います。
Tailwindcssのインストール
注）TailwindcssV4.1を使っているので、V3以下には対応していません！
ということで、XAMMPに入っていないTailwindcssのインストール。
CDNは開発用でサイトを作るには非推奨のようだったので、
とりあえず、TailwindcssはCLIを使うことに。
下記のbashを叩けば、これだけで必要なnodeが出来る。
※もしnodeが足りていない場合は、公式からnodeをインストールするのがベスト
npm install tailwindcss @tailwindcss/cliその後は好きな名前のcssファイル内に、下記を記述。
これでnode内にTailwindcssに必要なnodeが追加される。
@import "tailwindcss";仮に、ファイル名はcustomize.cssという名前で作ってみる。
customize.css（仮）内には、フレームワークには無い色を追加する等、自由にカスタマイズ可能です。
@theme {
--color-mint-500: oklch(0.72 0.11 178);
}先に作ったcustomize.cssを読み込ませて、
本番用のtailwind.css（仮）を作ってくださいという魔法のbashが下記のもの。
npx @tailwindcss/cli -i ./customize.css -o ./tailwind.csstailwind.cssというファイルが出来ているはずなので、これで準備OK！
<head>タグ内に下記を記述すれば、Tailwindcssが使えるようになります。
<link href="./tailwind.css" rel="stylesheet">最初にCSSファイルを作った時点では、必要最低限しかTailwindcssのクラスが載っていないので、
HTMLにクラスを追加→bashを叩くという手順で、tailwind.css（仮）に反映されていきます。
それが面倒で、PHPファイルを更新する度に、追加されたクラスの差分を一緒に追加しておきたい場合は
npx @tailwindcss/cli -i ./customize.css -o ./tailwind.css --watchのように最後に「–watch」を付けることで、常に最新の状態を保つことができます。
