TailWind CSSを使ってタブでコンテンツの切り替えをする

2022年6月15日

TailWind CSSはユーティリティファーストでレイアウトを少し変更したい場合などとても便利です。

しかし、TailWind CSSを使ってコンポーネント作る場合は、たくさんのクラスを組み合わせる必要があり、Bootstarapなどに比べると難易度が上がってしまいます。

そこでこの記事ではTailWind CSSを使ったタブでコンテンツを切り替えサンプルを集めたので時間の節約にご活用ください。

TAILWIND STARTER KIT

こちらのサンプルコードではtailwind CSSを用いたHTMLだけではなく、javascriptのサンプルコードもあります。

React,Vue,Angularのサンプルコードもありよりどりみどりです。

こちらではシンプルなタブのサンプルコードが紹介されています。

こちらは今風のタブのサンプルコードが紹介されています。

こちらは有料です。こんなのもTailwind CSSで作れるというサンプルとして眺めるのもいいかもしれません。

よかったらシェアしてね！