昨日12月25日、正式に「Tailwind CSS v4 実践ガイド 〜コンポーネント時代のCSS〜」をリリースしました（講座の無料プレビューも追加しました）。
Tailwind CSS 自体は新しいものではなく以前からあって、ただ使うだけであればさほど難しいものではありません（ユーティリティクラスって何よ、みたいなことにはなりますが）。
これまでもエンジニアさんが主体で動くようなプロジェクトでは広く使われている気がしておりますが、デザイナーさんが主体となりデザインを忠実に再現するような場合は従来のHTMLとCSSの組み合わせがまだまだ主流だろうなぁ…と思っています（あくまでも私がぼんやり見てる感じでは、です）。
CSSのフレームワークは Bootstrap をはじめとして過去にもありましたが、Tailwind CSS はその中でも特に「ユーティリティファースト」という思想を掲げています。これにより、開発速度が飛躍的に向上する可能性があります。
ただ、結局のところ使ってみないことにはわからないですし、表面だけ見てもなかなか理解しづらい部分もあります。CSSのフレームワークを使うと「デザインが制限される」といったイメージもあるでしょう。「クラス名で埋め尽くされて汚くなる」「保守できない」といった誤解も多いかと思います。
そこで本講座では、Tailwind CSS v4 の新機能を活用しつつ、コンポーネントを使ってサイトなどを構築する機会も増えてきた現代にあわせて、これまで使っていたBEMなどのCSS設計を現代の技術でどう再構築するか、その答えを提供します。
主な内容
純粋なHTML/CSSのプロジェクトでも使えるよう Tailwind CSS を使うにあたって覚えておきたい基本的なところから始めて、React / Vue / Astro のようなフレームワークでも活用できるコンポーネントの作り方など実践的な内容までを解説しています。
Figmaをお使いであれば、デザインされた画面からピクセルベースで値を取得して実装するのではなく、Tailwind CSS のクラス付きのHTMLを丸ごと取り出すやり方は、制作環境を問わず多くの方が活用できると思います（*1）。
さらにTailwind CSS は世界規模で広く使われるもので、いまどき話題のAIとも相性が良いときています。今回は「Figma MCP」と「Tailwind CSS MCP」をダブルで組み合わせて、Figmaのコンポーネントを Tailwind CSS v4のコードで生成する方法も付け加えました（*2）。
従来のプロジェクトを Tailwind CSS に置き換えるとかはないとは思いますが、このTailwind CSS MCP を使って従来のCSS（SCSS）で作られた HTML/CSS を元に Tailwind CSS に変換する様子も念のため入れてあります。
詳しい動画構成は商品ページをご覧ください。
講座の無料プレビューも用意しました。
Tailwind CSS を使えば、コード量も少なくなってHTMLとCSSを行き来することもありません。つまるところ、制作時間そのものが大幅に短縮できる可能性があります。デザイナーとエンジニアの間での共通言語として、ぜひこの機会に習得してみてはいかがでしょうか。
*1: できるだけ Tailwind CSS ベースでデザインを考えておいた方が無駄はないと思います
*2: Figma のファイルをきちんと作れている前提。コンテキストエンジニアリングができていて環境のガイドラインさえあれば、プロンプトなんかはあまり意識しなくても良いです
---
今回は先行予約の段階で既に多くの方にご購入いただいておりまして、先行予約価格ではなくなりましたが、2025年12月31日までは「年末特別＆来年から新しいこと始めるぞ価格」としていくらかお安く提供しております。
LINEの新規友だち登録割引もありますので、それを使っていただくとさらにお得になりますので是非ご活用ください（LINEでは更新情報のお知らせや質問とかも受け付けてます）