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

Separate content into different panes where each pane is viewable one at a time.

This is the first item's tab body.

Basic usage

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

                      
                        <nav class="flex gap-x-2" aria-label="Tabs" role="tablist">
                          <button type="button" class="active" id="unstyled-tabs-item-1" aria-selected="true" data-hs-tab="#unstyled-tabs-1" aria-controls="unstyled-tabs-1" role="tab">
                            Tab 1
                          </button>
                          <button type="button" id="unstyled-tabs-item-2" aria-selected="false" data-hs-tab="#unstyled-tabs-2" aria-controls="unstyled-tabs-2" role="tab">
                            Tab 2
                          </button>
                          <button type="button" id="unstyled-tabs-item-3" aria-selected="false" 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

Data Options

Name	Description	Options	Default value
`data-hs-tabs`	Contains configuration options for customizing tab behavior and appearance. Should be added to the tablist.	—	—
`:eventType`	Set `hover` to activate tabs on mouseover, or `click` for manual clicks (the default).	"click" \| "hover"	`click`
`data-hs-tab`	Activate a tab by specifying on an element. This must be a valid selector. Should be added to the button (trigger).	string	—
`data-hs-tab-select`	You can pass a select ID there, each option of this select must have a value equal to the tab ID, for example `<option value="#hs-tab-to-select-1">Tab 1</option>`, when you select this value the corresponding one will be opened id tab. Should be added to the tablist.	id	—

Tailwind Modifiers

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

Methods

The HSTabs object is contained within the global window object

Method	Description
Public methods
`destroy()`	Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
`HSTabs.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`
`HSTabs.open(target)`	Opens the element associated to the `target`. `target` should be a Node

Destroy instance (public method).

                      
                        const { element } = HSTabs.getInstance('#tabs', true);
                        const destroyBtn = document.querySelector('#destroy-btn');
                        
                        destroyBtn.addEventListener('click', () => {
                          element.destroy();
                        });

Open item (static method).

                      
                        const openBtn = document.querySelector('#open-btn');

                        openBtn.addEventListener('click', () => {
                          HSTabs.open(document.querySelector('#tab'))
                        });

Events

Method	Description	Returned value
`on:change`	Called when any tab is changed.	`el` HTMLElement. Toggle button (element that was clicked) `prev` string. Previous tab ID `current` string. Current tab ID

An example where a function is run every time a tab changes.

                      
                        const el = HSTabs.getInstance('#tab-1');

                        el.on('change', ({el, prev, current}) => {...});

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 Components

Tailwind CSS Tabs

On this page