Sass経験者がTailwind CSS v4を約6時間で習得。LPをピクパまで仕上げた記録

2026.09.29

これまでコーディングは、Sass（FLOCSS）で書いてきました。
今回、Tailwind CSSでの制作に対応できるようにしたくて、練習用のLPを1本作りました。

結果、習得までは約6時間。ピクパ合わせまで入れても、3日間・合計10時間ほどで完成しました。
思っていたよりずっとスムーズだったので、やったことと、感じたことをまとめておきます。

制作したLP
Tailwind CSS 練習LP
※デザインは無料コーディング練習所【上級編】のものをお借りしています。

使った環境

日本語フォントは、カンプではヒラギノでしたが、WindowsでもMacでも同じ見た目で確認できるように、Noto Sans JPに置き換えて制作しました。

環境構築の時間は、別にカウントしています。

Tailwindは、結局「CSSを、クラス名で書く」ものなんですよね。
display: flex; は flex、margin-top: 40px; は mt-10 という感じで、知っているCSSを置き換えていくだけでした。

HTMLとCSSを学び始めたころは、本当に苦しんだなぁ…と思い出しながら作業していましたが、あのときの積み重ねがあったからこそ、今回はこの時間でできたんだと思います。

最初は全部覚えなきゃ、と思っていましたが、その必要はありませんでした。
flex、items-center、gap- のように何度も使うクラスは、書いているうちに自然に覚えられます。

Tailwindは、何も付けないクラスがSP、md: を付けたクラスがPC、というSPファーストの考え方です。
もともとSPファーストで書いていたので、ここもすんなり入れました。

ただ、PCの調整をしているつもりで、md: を付け忘れてSPのスタイルを上書きしてしまうことは何度かありました。
text-sm md:text-base のように、SPとPCの値をペアで書くようにしました。ミスも学習ですね。

これが、とても役に立ちました。

Tailwind CSS IntelliSense
クラス名の候補が出るのと、クラスにマウスを乗せると、実際に出力されるCSSが表示されます。「p-4 って何pxだっけ？」がその場で分かるので、これが一番の教材でした。
Prettier ＋ prettier-plugin-tailwindcss
保存すると、クラスの並び順を公式の推奨順に自動で揃えてくれます。順番を気にせず書けて、md: が最後にまとまるので、PCで何が変わるのかも読みやすくなります。

使い慣れたCSSのプロパティ名から探せるので、とても便利でした。
「Sassならこう書くけど、Tailwindだと何？」というときに、ずっと開いていました。

ヘッダー、フッター、FVを手で打って、Tailwindの書き方をつかんだあとは、いつもの制作フローに戻しました。
Figmaのカンプを画像で書き出して、Claude Codeに渡してコーディングしてもらう流れです。

最初に、色・フォント・コンテンツ幅などの値を @theme に登録しておいたので、AIが書くコードも登録した値を使ってくれて、8割くらいはこれで組めました。

手で書いて一度理解しておいたおかげで、AIが書いたコードを読んで直すのも、スムーズにできました。

練習用のLPですが、実際には作業時間の3〜4割くらいは、ピクパ合わせをしていたと思います。
このあたりは、SassでもTailwindでも変わらない部分ですね。

Sassの経験があれば、Tailwind CSSの習得は、思っていたよりずっと短い時間でできました。
同じようにSassからTailwindへの移行を考えている方の、参考になればうれしいです。