Tailwind CSS Plugins - Preline UI

About

Often the biggest challenge when working with a framework is figuring out what you're supposed to do when there's something you need that the framework doesn't handle for you.

Preline plugins have been designed from the ground up to be extensible and customizable, so that no matter what you're building you never feel like you're fighting the framework.

This guide covers topics like how our plugins work with Tailwind.

List of plugins

Basic usage

Installation

Plugins can be added to your project by installing them via npm, adding them to your tailwind.config.js and then adding them to your HTML-file. Learn more here.

Example

Here is an example of what our library markup might look like.

                
                  <div class="hs-dropdown">
                    <button type="button" class="hs-dropdown-toggle">
                      <!-- ... -->
                    </button>

                    <div class="hs-dropdown-menu">
                      <!-- ... -->
                    </div>
                  </div>
                
              

Methodology

How it works

Every utility class can be applied conditionally to classes in our plugins, making it easy to create complex interfaces without ever leaving your HTML.

To add a utility to active or opening classes, all you need to do is prefix the utility with the : character:

                
                  <div class="hs-dropdown-open:opacity-100 opacity-0">
                    <!-- ... -->
                  </div>
                
              

This works for every utility class in the framework, which means you can build any design solution — you can even control things like letter spacing or cursor styles.

Here's an example of a dropdown component:

                
                  <div class="hs-dropdown relative inline-flex">
                    <button id="hs-dropdown-slideup-animation" type="button" class="hs-dropdown-toggle py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
                      Actions
                      <svg class="hs-dropdown-open:rotate-180 w-2.5 h-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                      </svg>
                    </button>

                    <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-72 hidden z-10 transition-[margin,opacity] opacity-0 duration-300 mt-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 dark:bg-gray-800 dark:border dark:border-gray-700 dark:divide-gray-700" aria-labelledby="hs-dropdown-slideup-animation">
                      <!-- ... -->
                    </div>
                  </div>
                
              

Here's how the example above works:

• hs-dropdown-toggle triggers the dropdown.
• By default hs-dropdown-open has no styles and we use opacity-0 to hide the dropdown before it's triggered, but by adding hs-dropdown-open:opacity-100 utility we turn the opacity up to 100%.
• We also use rotate-180 to rotate the arrow 180deg when it's active.

Dark mode

They even go along with the framework's dark mode class.

                
                  <div class="dark:hs-accordion-active:text-fuchsia-600">
                    <!-- ... -->
                  </div>
                
              

Data attribute

Preline plugins work well with when used with other frameworks like Bootstrap, Angular Material, and others. To avoid attribute name overlap, we added a unique hs- prefix.

                
                  <div class="hs-dropdown" data-hs-dropdown-trigger="hover">
                    <!-- ... -->
                  </div>