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

React
スポンサーリンク
language

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

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

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

スポンサーリンク

TAILWIND STARTER KIT

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

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

Tailwind Starter Kit by Creative Tim | Free & Open Source Design System
A beautiful extension for TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue, and Angular.

tailwind components Tabs

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

Tabs by tailwindcss | Navigations, Tabs
'Tabs from tailwind docs'

tailwind components Tab navigation

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

Tab navigation by killgt | Navigations, Tabs
'Regular tab navigation'

tailwind ui

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

Tabs - Official Tailwind CSS UI Components
タイトルとURLをコピーしました