Tailwind CSS Tabs

Tabs make it easy to switch between different views.

Installation

To get started, install Tabs plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/tabs

Example

A basic form of tabs.

Copy

                          
                            <div class="border-b border-gray-200 px-4 dark:border-gray-700">
                              <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
                                <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-white active" id="basic-tabs-item-1" data-hs-tab="#basic-tabs-1" aria-controls="basic-tabs-1" role="tab">
                                  Tab 1
                                </button>
                                <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-white" id="basic-tabs-item-2" data-hs-tab="#basic-tabs-2" aria-controls="basic-tabs-2" role="tab">
                                  Tab 2
                                </button>
                                <button type="button" class="hs-tab-active:font-semibold hs-tab-active:border-blue-600 hs-tab-active:text-blue-600 py-4 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent text-sm whitespace-nowrap text-gray-500 hover:text-white" id="basic-tabs-item-3" data-hs-tab="#basic-tabs-3" aria-controls="basic-tabs-3" role="tab">
                                  Tab 3
                                </button>
                              </nav>
                            </div>

                            <div class="mt-3 p-4">
                              <div id="basic-tabs-1" role="tabpanel" aria-labelledby="basic-tabs-item-1">
                                <p class="text-gray-500 dark:text-gray-400">
                                  This is the <em class="font-semibold text-gray-800 dark:text-gray-200">first</em> item's tab body.
                                </p>
                              </div>
                              <div id="basic-tabs-2" class="hidden" role="tabpanel" aria-labelledby="basic-tabs-item-2">
                                <p class="text-gray-500 dark:text-gray-400">
                                  This is the <em class="font-semibold text-gray-800 dark:text-gray-200">second</em> item's tab body.
                                </p>
                              </div>
                              <div id="basic-tabs-3" class="hidden" role="tabpanel" aria-labelledby="basic-tabs-item-3">
                                <p class="text-gray-500 dark:text-gray-400">
                                  This is the <em class="font-semibold text-gray-800 dark:text-gray-200">third</em> item's tab body.
                                </p>
                              </div>
                            </div>

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
                          <button type="button" class="active" id="unstyled-tabs-item-1" data-hs-tab="#unstyled-tabs-1" aria-controls="unstyled-tabs-1" role="tab">
                            Tab 1
                          </button>
                          <button type="button" id="unstyled-tabs-item-2" data-hs-tab="#unstyled-tabs-2" aria-controls="unstyled-tabs-2" role="tab">
                            Tab 2
                          </button>
                          <button type="button" id="unstyled-tabs-item-3" data-hs-tab="#unstyled-tabs-3" aria-controls="unstyled-tabs-3" role="tab">
                            Tab 3
                          </button>
                        </nav>

                        <div class="mt-3">
                          <div id="unstyled-tabs-1" role="tabpanel" aria-labelledby="unstyled-tabs-item-1">
                            This is the <em>first</em> item's tab body.
                          </div>
                          <div id="unstyled-tabs-2" class="hidden" role="tabpanel" aria-labelledby="unstyled-tabs-item-2">
                            This is the <em>second</em> item's tab body.
                          </div>
                          <div id="unstyled-tabs-3" class="hidden" role="tabpanel" aria-labelledby="unstyled-tabs-item-3">
                            This is the <em>third</em> item's tab body.
                          </div>
                        </div>

Accessibility notes

Keyboard interactions

Command	Description
`ArrowLeft` and `ArrowRight`	Selects the previous/next non-disabled tab
`ArrowUp` and `ArrowDown` in vertical mode	Selects the previous/next non-disabled tab
`Home` and `End`	Selects the first/last non-disabled tab
`Enter`	Activates the selected tab

JavaScript behavior

Options

Parameters	Description
`data-hs-tab`	Activate a tab by specifying on an element

Classes

Name	Description
`hs-tab-active:`	A modifier that allows you to set taiwind classes when the tab is active for toggle and for content

Methods

The HSTab object is contained within the global window object

Method	Description
`HSTab.open($tabToggleEl)`	Open tab

Events

Method	Description
`change.hs.tab`	Called when any tab is changed.

Open any dropdown menu event example.

                      
                        window.addEventListener('change.hs.tab', ($tabToggleEl) => {...})

                        // OR

                        HSTab.on('change', ($tabToggleEl) => {...})

Change specific tab event example.

                      
                        $tabToggleEl.addEventListener('open.hs.collapse', (evt) => {...})

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Tabs

Tailwind CSS Tabs

On this page