演習(第3部)
読むだけでなく、実際に環境を作るのがこの部の演習です。付録F のハンズオンと合わせて取り組んでください。
おすすめの順序: 初めてなら、まず付録F で「動く状態」を作ってから(5 分)、第7章〜第9章を読み返して「なぜその設定が要るのか」を理解し、最後に下の演習に取り組むと、各手順の意味が腑に落ちます。
- 動かそう: 付録F を参考に、好きな経路(Play CDN / Rails / Vite)で「Hello, Tailwind!」を青い太字で表示させてください。表示できたら
text-blue-600を別の色に変え、反映されることを確認しましょう。 - トラブルを再現しよう: わざと
@import "tailwindcss";を消して(または@tailwind base;という古い書き方にして)、スタイルが効かなくなることを確認してください。原因と直し方を §7.8 で確認しましょう。 - エディタを整えよう: VS Code を使っているなら Tailwind CSS IntelliSense を入れ、
bg-と打って補完が出ること、クラスにホバーすると生成 CSS が見えることを確認してください(第9章)。