TailWind CSSはユーティリティファーストでレイアウトを少し変更したい場合などとても便利です。
しかし、TailWind CSSを使ってコンポーネント作る場合は、たくさんのクラスを組み合わせる必要があり、Bootstarapなどに比べると難易度が上がってしまいます。
そこでこの記事ではTailWind CSSを使ったタブでコンテンツを切り替えサンプルを集めたので時間の節約にご活用ください。
目次
TAILWIND STARTER KIT
![](https://omkz.net/wp-content/uploads/2021/03/8c2309f8f2071cf1d525e10fb529dbdb.png)
こちらのサンプルコードではtailwind CSSを用いたHTMLだけではなく、javascriptのサンプルコードもあります。
React,Vue,Angularのサンプルコードもありよりどりみどりです。
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/javascript/tabs/text
tailwind components Tabs
![](https://omkz.net/wp-content/uploads/2021/03/fcbc443078a1a1f6d92f2f4ed20133f3.png)
こちらではシンプルなタブのサンプルコードが紹介されています。
https://tailwindcomponents.com/component/tabs
tailwind components Tab navigation
![](https://omkz.net/wp-content/uploads/2021/03/3e7cae9d8756a4827d4aa789e13a84ef.png)
こちらは今風のタブのサンプルコードが紹介されています。
https://tailwindcomponents.com/component/tab-navigation
tailwind ui
![](https://omkz.net/wp-content/uploads/2021/03/b90d0a4be48eab57797b25a3decce8ea.png)
こちらは有料です。こんなのもTailwind CSSで作れるというサンプルとして眺めるのもいいかもしれません。
https://tailwindui.com/components/application-ui/navigation/tabs
コメント