TailwindCSSをAIに教えてもらう

Aiにデザイン頼むと、React＆TailwindCSSで書いてくるのであった。

一応、知っておかないと気持ち悪いので、Reactの本を買って読む。まったくわからない。というか、便利なの？面倒くさい気がする。。。　でも、それでも、これならやれるなと思ってしまった。　が　Tailwind CSSは、これは覚えるようなものじゃなく、AI用ですね。

そうか、AIが書いて、プログラミングなんて、そんな知らんくてもいいんや！

PHPで書いて、CSSあてて、Bootstrapでみたいなことはもう終わったんだと悲しみにくれるが、内容を知ると、素晴らしいなと思うのだった。

Tailwind CSS の最新は、4.3　Amazonでも英語の本しか最新の情報はない。

ショーケースというのを見ていると楽しくなってくる。

まあ。こんな私が、そんなオシャレなサイト作るはずはないけど。

Blogger で 大阪都構想　大阪市廃止反対のホームページを作らせてもらいました。　Aiに相談しながら作ると、なんと、オシャレになるのでしょう。。。

でも、文字を流すようにしてくれとか、指示したのは私なんで。はい。　なんか、そういう時代なんだなぁって思います。

max-w-6xl 要素の最大幅（Maximum Width）

mx-auto 左右の余白（Margin X-axis）を「自動（auto）」に。p-4　要素の内側の余白（Padding）を指定します。
bg-zinc-950 背景色（Background）を指定しています。ここを参照。text-zinc-100　文字の色（Text color）を指定

flex-col 並びの方向（Flex Direction）を「縦方向（Column）」に指定

gap-6 縦や横に並んだ子要素同士の間隔（隙間）を指定します。6 は 1.5rem（通常24px）に相当し、カードとカードの間に程よい余白を作ります。

⚠️ Fraudulent sign-ups detected 14:09

grid-cols-1 コラムが1列を基本的に指定し

md:grid-cols-2　md: はメディアクエリ（画面幅が特定のサイズ以上、通常はタブレットやパソコン向けの 768px 以上）のときだけ2列にしろの指定.

bg-zinc-950/60　背景色（Background）を指定しています。bg-zinc-950（非常に濃い黒に近い色）に、/60 という 透明度（Opacity / 透過度） を指定
rounded-xl 要素の角を丸くします
h-48 要素の高さ（Height）を指定しています。48 は 12rem（約192px）

高さや幅をピクセルで指定もできる

h-[200px]　幅　w-[350px].mt-[15px]　マージントップ15px と、わりと直感的

<script src="https://cdn.tailwindcss.com"></script>　と書いたらいいだけなんですごい

皆さんがんばりました

カジノはいらない！

熱心に高校生が聞いてくれました