Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト／LP 〜
公開日：2022年8月5日 更新日：2022年8月5日
記事概要
Codejumpのデザインをもとに、Tailwind CSSの実装例を作成してみました。
Tailwind CSSのサンプルコードとしてもご活用いただければ幸いです。
コピーして使えるようにGithub URLを掲載いたします。
実装例
- ボタンを押すと、デモページが動作するようになります。
- ボタンを押すと、Tailwind CSSが記載されたHTMLが閲覧できます。
- 例えば、class属性に書かれている がTailwind CSSです。
- ボタンを押すと、コンパイル済みのCSSが閲覧できます。こちらは、Tailwind CSSのライブラリで自動生成されたCSSです。
See the Pen Tailwind CSS実装例(サンプルコード)の紹介 〜 フォトサイト／LP 〜 by ふじポン@CEO兼エンジニア (@fujipon-wywy) on CodePen.
コード(Github)
開発環境などにも興味がある方は、以下、Githubをご確認ください。
README.mdに開発環境の構築方法、コンパイ方法など記載してあります。
デザイン参考(Codejump)
デザインは、「作って学ぶコーディング学習サイトのCodejump」様のデザインを参考にさせていただきました。ありがとうございます。
まとめ
実装例を見ると、結構、「Tailwind CSS難しいな」って感じられた方もいるのではないのでしょうか？ただ、一回、実装してみると通常のHTML/CSSよりもわかりやすくなるので、以下参考に是非学んでみてください！
参考1：公式サイト
最新のインストール方法など、公式情報が満載です。ブログなどは古い情報も混じっているので、まずは公式サイトを一通りチェックすることをお勧めします。
参考2：ユーティリティーファーストとTailwind CSSのススメ
Qiitaの人気記事です。Tailwind CSSは、ユーティリティーファーストという考え方が、特徴的なのですが、具体例を交えてわかりやすく説明してくています。
参考3：TailWindCSSを始めようとしている人へ
Zennのわかりやすい記事です。「使い方をざっくり知りたい人」「できることをざっくり知りたい人」に向けて、要点がよくまとまっているサイトです。これから実際に始める方には、まず読む資料だと思います。