Tailwind CSS Plugins by Htmlstream

Hello Dev.to, Community!

I'm excited to share with you our new set of plugins that we've developed for the Tailwind CSS audience.

A handful of completely unstyled, fully accessible UI plugins for popular Tailwind CSS features from Accordion and Dropdowns to Tooltips and Modals that for one reason or another don't belong in core.

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 Preline 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 Preline 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:

Here's how the example above works:

<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-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-how-it-works">
    <!-- ... -->
  </div>
</div>

• 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.

Accessibility Friendly

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>

Features

• Methodology - Apply any Tailwind CSS utility classes, all you need to do is prefix the utility with the : character:

• Accessibility - Preline UI comes with accessibility features so everyone can use it

• Keyboard Friendly - Command the interface at your fingertips. Go to any page, focuses first item that matches keyboard input, and more

Plugins

Each plugin comes with its own documentation page, starting installation guide

Next up is the Examples section, which offers a stylish example with copy-to-clipboard functionality and a dark/light mode switch so users can see how this particular example is done in dark mode.

If you prefer to create your own style? There is a section where a completely unstyled code example contains classes for the basic functionality of the plugin for you to build your next big idea without the hustle of deleting the style.

<div class="hs-dropdown relative inline-flex">
  <button id="hs-dropdown-unstyled" type="button" class="hs-dropdown-toggle inline-flex justify-center items-center gap-x-2">
    Actions
    <svg class="hs-dropdown-open:rotate-180 w-2.5 h-2.5" 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 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 w-56 hidden z-10 mt-2 min-w-[15rem] bg-white" aria-labelledby="hs-dropdown-unstyled">
    <a class="block" href="#">Newsletter</a>
    <a class="block" href="#">Purchases</a>
    <a class="block" href="#">Downloads</a>
    <a class="block" href="#">Team Account</a>
  </div>
</div>

Otherwise, you can choose from a number of demo examples provided by the Preline authors.

All the available plugins so far:

• Accordion
• Collapse
• Tabs
• Scrollspy
• Dropdown & Mega Menu
• Modal, Offcanvas & Sidebar
• Tooltip & Popover
• Remove Element
• and more to follow soon…

Conclusion

Preline Plugins offers a wide range of options for variety use cases, making developing simple and complex UIs easier. The best thing is, it doesn't limit you! 🔥

We believe that the idea of utility first approach is the way forward. We’re just getting started and the future holds even more exciting features. Let’s build together! 🤘

Don't forget to share the post with your friends and other code newbies learning CSS frameworks.

For more up-to-date web development content, follow us on Twitter, and Htmlstream in Dev.to and me on Dev.to!

Thanks for reading! 😎