Tailwind CSS Tabs Plugin API

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.

1. Install the plugin

   Install @preline/tabs via npm

   Terminal

                             
                               npm i @preline/tabs
                             
                           

2. Add the plugin CSS

   Use @source to register the plugin's JavaScript path for Tailwind CSS scanning, then @import the plugin's CSS files into your Tailwind CSS file.

   main.css

                             
                               @import "tailwindcss";
                               
                               /* @preline/tabs */
                               /* [!code highlight:3] */
                               @source "../node_modules/@preline/tabs/*.js";
                               @import "./node_modules/@preline/tabs/variants.css";
                               @import "./node_modules/@preline/tabs/theme.css";
                             
                           

3. Add the plugin JavaScript

   Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

   HTML

   <script src="./node_modules/@preline/tabs/index.js"></script>

   ---

   Additional Initialization Options

   Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

   HTML (non-auto)

   <script type="module"> // [!code highlight:3] import HSTabs from "@preline/tabs/non-auto.mjs"; new HSTabs(document.querySelector("#tabs")); </script>

   ---

   Via bundler

   When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.

   JavaScript (auto)

                             
                               import "@preline/tabs";
                             
                           

   JavaScript (non-auto)

                             
                               import HSTabs from "@preline/tabs/non-auto";
                               
                               HSTabs.autoInit();
                               
                               // Or initialize a specific element manually
                               const el = document.querySelector("#tabs");
                               if (el) new HSTabs(el);
                             
                           

Example

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

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>
                      
                    

Tailwind Modifiers

Methods

The HSTabs object is contained within the global window object

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

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

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

Events

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

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

Ready to use Components

Tabs

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Tabs examples