HeadlessUI- Tabs Part 2- Styling the selected tab

Ckmobile
2 min readOct 23, 2022
Photo by Niels Kehl on Unsplash

In this part, we are going to style the selected tab, we need the help of classNames packages.

npm install classnames

We then import the classNames packages on the top.

import classNames from 'classnames';

Then, at the <Tab> component. Added to check if the tab is selected, set the background color is blue with 500 units and white text color, otherwise just set the text is blue with 700 units.

<TabclassName={({ selected }) =>classNames('w-full rounded-lg py-2.5 text-sm font-medium leading-5',selected ? 'bg-blue-500 text-white' : 'text-blue-700')}>tab 1</Tab>

We copy this logic to other <Tab> components.

The selected tab will have different styles.

If you liked this story, you might also like a Medium membership. It’s only $5 a month (a price of a cup of coffee!) but it will give you unlimited access to stories while supporting your favorite writers. If you sign up using this link, I’ll earn a small commission. Thanks!

Follow us: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad, Quora, Telegram

Ckmobile

Teaching JavasScript, React, React Native, MongoDB and NodeJS https://linktr.ee/ckmobile

Recommended from Medium

Lists

See more recommendations