本イベントは有料イベントとして開催します。
非エンジニアでも、AIエージェントや各種サービスを活用すれば、プロンプトで指示するだけで手軽にモックアップを作成できる時代になりました。
サイトやアプリの画面をコード化するサービスの多くは、特別な技術仕様を指定しない限り、「Tailwind CSS」をベースにレイアウトやデザインを構築します。そのため、Tailwind CSSの基本を少しでも理解しておくと、プロンプトだけでは意図がうまく伝わらない場合でも、自分で簡単に調整できるようになります。
今回は、Tailwind CSSの基本や押さえておきたい特徴を中心に、TailwindベースのFigmaファイルを作成する方法まで解説します。
アジェンダ
- AIが Tailwind CSS を好む理由（5分）
- 他のCSSフレームワークと何が違う？（5分）
- ユーティリティファースト？（5分）
- まずは自分で書いてみよう（10分）
- 今度はAIに書いてもらおう（10分）
- できたコードを確認してみよう（10分）
- VSCodeの拡張機能とコード補完（5分）
- （休憩）
- 覚えておきたいサイズの法則（5分）
- 答えはすべて公式サイトに（5分）
- クラス名の意味するところ（5分）
- プリフィクスを使ってできること（10分）
- Figmaのファイルはこう作れ（10分）
- 既存のCSSをTailwind に移植できる？（10分）
- AIにコードを書かせるときの注意点（5分）
特典
本イベントには、こもりまさあきさんの「Tailwind CSS v4 実践ガイド」講座（7,700円）が付属します。
