This page explains how Preline plugins work with Tailwind CSS and its methodology.
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.
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>
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
<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:
Here's how the example above works:
hs-dropdown-toggletriggers the dropdown.
- By default
hs-dropdown-openhas no styles and we use
opacity-0to hide the dropdown before it's triggered, but by adding
hs-dropdown-open:opacity-100utility we turn the opacity up to
- We also use
rotate-180to rotate the arrow
180degwhen it's active.
<div class="hs-dropdown relative inline-flex"> <button id="hs-dropdown-how-it-works" type="button" class="hs-dropdown-toggle py-3 px-4 inline-flex justify-center items-center gap-2 rounded-lg 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-slate-900 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-how-it-works"> <!-- ... --> </div> </div>
They even go along with the framework's dark mode class.
Command the interface at your fingertips with accessibility. Go to any page, focuses first item that matches keyboard input, and more so everyone can use it.
<div class="hs-dropdown-menu"> <a class="focus:ring-2 focus:ring-blue-500" href="newsletter.html"> Newsletter </a> </div>