Introduction
群雄割拠の CSS フレームワーク界隈、ML エンジニアの私にはついていけておりませんが、Tailwind CSSが簡単に扱えそうだったので試してみました。
ちょうどペンギンの教師データ作成中でペンギン画像が溜まったことも重なり、折角なのでペンギンに溢れたポートフォリオまとめサイトを作りました。
本記事はこのサイト紹介記事です。
本記事が少しでも読者様の学びに繋がれば幸いです！
「いいね」をしていただけると今後の励みになるので、是非お願いします！
環境
Ubuntu22.04
Tailwind CSS の使用感
数日しか触っていないので恐縮ですが、ざっくり使用感をまとめます。1
※アプリを先に見たい方向けに折り畳んでおきます。
=======================
Tailwind CSSの感想
========================
メリット
- レスポンシブ対応が簡単。
- 実装時間の短縮。
- 使い回しやすい。
- 公式サイトが見やすい。
デメリット
- 保守性/可読性が悪い。
- ビルドが必要。
フロントエンドやデザイナーに特化した方は違和感満載かも知れませんが、正確さより利便性を重視する場合には良い選択になると思いました。
個人的にはレスポンシブ対応だけでも採用したくなります。2
https://tailwindcss.com/docs/responsive-design
デメリットはソースコードが汚くなる点ですね。
私が慣れていないのも原因に思いますが、HTML に書き込むのでコードは長くなりますし、可読性もマウスホバーしないと分かり辛く、保守が大変そうです。
とはいえ今後 CSS を扱う際はTailwind CSSを採用すると思います。
初見でもバニラ CSS や他フレームワークと比べて圧倒的に早く実装できて好感触でした。
アプリ紹介
いつも GitHub Pages にデプロイしていますが、netlify にデプロイしています。3
=======================
Summary
========================
※工数は 1.5 日程度です。5
GitHub はこちら
あくまでTailwind Cssがメインなのでサイトは簡素です。
Reactと相性が良さそうなので次回は本格的な実装をしていきたいですね。
最後に
最後まで閲覧頂きありがとうございました。
Tailwind CSSにフォーカスした開発を行うことで、今までは面倒なものという認識だった CSS の面白さを知るきっかけになりました。
実装イメージが何となく掴めたので、忘れない内にReact等でも試しておきたいです。
設計思想はともかく、強みのあるフレームワークのためこれを機に是非試してみてください！
基本は公式ドキュメントとエディタを同時に開いて、調べながら実装するとスムーズでした。
今回の実装で困った箇所はすべて公式で解決できています。
なお最近はペンギン分類の CNN を作っており、教師データを漁ってペンギンを愛でて時間が消し飛んでいきます。
良ければ覗きに来てください。
Star いただけると泣いて喜びます。
本記事がお役に立てば幸いです！
参考 URL
本記事で紹介したサイトは下記講座をベースに作成しました。