概要

私は仕事でもプライベートでも Web アプリを開発する際はよく React.js/ Next.js を利用しているのですが、CSS やデザインについては疎いため簡単に綺麗なデザインを提供してくれる Mui を使用しています。

Mui は導入も利用もとても簡単なので個人的にはとても大好きなのですが、同じコンポーネントを繰り返し使用することになるため毎回同じようなデザインになってしまい、少々自分でも苦笑いしてしまいます。

そのため、最近では巷で話題になっている CSS フレームワーク TailwindCSS を利用したいと思い、絶賛勉強中です。

そんな中、Github 上で React.js と TailwindCSS を組み合わせたポートフォリオが公開されていたので、どんな感じなのかなと参考になるものがありました。

今回紹介する OSS は TailwindCSS を React.js に適用したポートフォリオがまとめられている「React Portfolio With Tailwind」になります。

こちらでは主にこれまで作成されてきたポートフォリオが画像で紹介されていますが、TailwindCSS を使用することでどのようなデザインが作成できるのかというものが一目で分かります。

それでは早速見てみましょう！

利用手順

以下の Github にリポジトリがあるためクローンし、必要なモジュール類をインストールしてローカルサーバー上で起動することで、ポートフォリオを参照することができます。

git clone https://github.com/developedbyed/react-portofolio-with-tailwind.git
cd react-portofolio-with-tailwind
npm install
npm run dev

早速自分も TailwindCSS と React.js で作成されたポートフォリオを参照させていただきました。

私が知らないだけでしたが、とても綺麗なデザインを作成することができるということが、こちらのポートフォリオを見ることで分かりますね！

また、ポートフォリオをローカルサーバー上で見るだけでなく、クローンしてきたプロジェクト自体も TailwindCSS を利用できるように設計されているので、TailwindCSS を利用してみたいという方にとってもこちらのリポジトリをクローンするだけで簡単に始めることができます。

今回は TailwindCSS を React.js に適用したポートフォリオがまとめられている OSS「React Portfolio With Tailwind」を紹介しました。

こちらのポートフォリオは Dimitri Marco 氏が作成されたもので、とても綺麗な Web サイトが紹介されていました。

自分も React.js を利用して開発をしているのでこちらで紹介されているような Web サイトや Web アプリを開発できたらなと思いました！

TailwindCSS を利用している開発者の方々や、自分のように TailwindCSS を利用してどのような感じの Web サイトを作成できるのかを学びたい方にとってはこちらの OSS は参考になるのではないでしょうか。

自分も Mui だけで開発するのを終わりにして、TailwindCSS を利用した開発を進めたいと思います！