Published on

How to Make A Tailwind CSS tabs With Tailwind CSS?

Tags
Navigations
Tailwind CSS tabs

As a FrontEnd technology blogger, it's essential to keep up with the latest trends and tools in the industry. One such tool that has gained a lot of popularity in recent times is Tailwind CSS. In this article, we will be discussing how to create a Tailwind CSS tabs ui component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to style HTML elements. It allows developers to create complex designs quickly by using pre-defined classes instead of writing custom CSS. Tailwind CSS is highly customizable and can be used with any front-end framework or library.

The description of Tailwind CSS tabs ui component

Tabs are a common UI component used in web applications to display multiple sections of content in a single view. A tab interface consists of a set of tabs, each representing a different section of content. When a user clicks on a tab, the corresponding content is displayed.

Why use Tailwind CSS to create a Tailwind CSS tabs ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to create a tab interface quickly. Using Tailwind CSS, we can create a responsive and customizable tab interface without writing any custom CSS.

The preview of Tailwind CSS tabs ui component.

To create a Tailwind CSS tabs ui component, we will be using the following classes:

  • border-b: To add a border at the bottom of the tab.
  • text-gray-500: To set the color of the tab text.
  • bg-white: To set the background color of the tab.
  • hover:text-gray-700: To change the color of the tab text on hover.
  • hover:bg-gray-100: To change the background color of the tab on hover.
  • active: To set the active tab.

Free download of the Tailwind CSS tabs's source code

The source code of Tailwind CSS tabs ui component.

To create a Tailwind CSS tabs ui component, we will be using the following HTML structure:

<div class="border-b">
  <div class="flex">
    <div class="-mb-px mr-1">
      <a class="bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-gray-500 font-semibold" href="#">
        Tab 1
      </a>
    </div>
    <div class="-mb-px mr-1">
      <a class="bg-white inline-block py-2 px-4 text-gray-500 hover:text-gray-700 font-semibold" href="#">
        Tab 2
      </a>
    </div>
    <div class="-mb-px mr-1">
      <a class="bg-white inline-block py-2 px-4 text-gray-500 hover:text-gray-700 font-semibold" href="#">
        Tab 3
      </a>
    </div>
  </div>
</div>

We can add the active class to the active tab to highlight it.

<link rel="stylesheet" href="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.min.css" />


<!-- This is an example component -->
<div class="max-w-2xl mx-auto">
    
    <div class="border-b border-gray-200 dark:border-gray-700 mb-4">
        <ul class="flex flex-wrap -mb-px" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
            <li class="mr-2" role="presentation">
                <button class="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" id="profile-tab" data-tabs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
            </li>
            <li class="mr-2" role="presentation">
                <button class="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300 active" id="dashboard-tab" data-tabs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</button>
            </li>
            <li class="mr-2" role="presentation">
                <button class="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" id="settings-tab" data-tabs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
            </li>
            <li role="presentation">
                <button class="inline-block text-gray-500 hover:text-gray-600 hover:border-gray-300 rounded-t-lg py-4 px-4 text-sm font-medium text-center border-transparent border-b-2 dark:text-gray-400 dark:hover:text-gray-300" id="contacts-tab" data-tabs-target="#contacts" type="button" role="tab" aria-controls="contacts" aria-selected="false">Contacts</button>
            </li>
        </ul>
    </div>
    <div id="myTabContent">
        <div class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800 hidden" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <p class="text-gray-500 dark:text-gray-400 text-sm">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Profile tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
        </div>
        <div class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
            <p class="text-gray-500 dark:text-gray-400 text-sm">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Dashboard tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
        </div>
        <div class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800 hidden" id="settings" role="tabpanel" aria-labelledby="settings-tab">
            <p class="text-gray-500 dark:text-gray-400 text-sm">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Settings tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
        </div>
        <div class="bg-gray-50 p-4 rounded-lg dark:bg-gray-800 hidden" id="contacts" role="tabpanel" aria-labelledby="contacts-tab">
            <p class="text-gray-500 dark:text-gray-400 text-sm">This is some placeholder content the <strong class="font-medium text-gray-800 dark:text-white">Contacts tab's associated content</strong>. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.</p>
        </div>
    </div>

    <p class="mt-5">This tabs component is part of a larger, open-source library of Tailwind CSS components. Learn more by going to the official <a class="text-blue-600 hover:underline" href="https://flowbite.com/docs/getting-started/introduction/" target="_blank">Flowbite Documentation</a>.</p>
</div>

<script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"></script>

How to create a Tailwind CSS tabs with Tailwind CSS?

To create a Tailwind CSS tabs ui component, follow these steps:

  1. Create a div element with the border-b class to add a border at the bottom of the tab interface.
  2. Create a div element with the flex class to create a flex container for the tabs.
  3. Create a div element for each tab and add the -mb-px mr-1 classes to remove the margin and add a small space between the tabs.
  4. Add an a element inside each tab div and add the bg-white inline-block border-l border-t border-r rounded-t py-2 px-4 text-gray-500 font-semibold classes to style the active tab.
  5. Add the hover:text-gray-700 and hover:bg-gray-100 classes to change the color of the tab text and background on hover.
  6. Add the active class to the active tab to highlight it.

Conclusion

In conclusion, Tailwind CSS is a powerful tool that can help developers create complex UI components quickly and easily. In this article, we discussed how to create a Tailwind CSS tabs ui component using Tailwind CSS. By following the steps outlined in this article, you can create a responsive and customizable tab interface for your web application.