1. Plugins
  2. Tabs


Tailwind CSS Tabs

Tabs make it easy to switch between different views.



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


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 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 type="button" id="unstyled-tabs-item-2" data-hs-tab="#unstyled-tabs-2" aria-controls="unstyled-tabs-2" role="tab">
                            Tab 2
                          <button type="button" id="unstyled-tabs-item-3" data-hs-tab="#unstyled-tabs-3" aria-controls="unstyled-tabs-3" role="tab">
                            Tab 3

                        <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 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 id="unstyled-tabs-3" class="hidden" role="tabpanel" aria-labelledby="unstyled-tabs-item-3">
                            This is the <em>third</em> item's tab body.

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.


Activates the selected tab.


Name Description Options Default value
data-hs-tab Activate a tab by specifying on an element. This must be a valid selector. string


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


The HSTabs object is contained within the global window object

Method Description
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

Open item (static method).

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

                        openBtn.addEventListener('click', () => {


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.

Image Description
Check out Preline UI Dismiss