5-day Mini-Course
Build UIs that don’t suck.
Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.
Using HTML
The HTML snippets in Tailwind Plus depend on a UI component library called Elements, which is used to power all of the interactive behavior, like dropdown menus, tabs, and listboxes.
Installing dependencies
A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.
The easiest way to install Elements is via the CDN. To do this, add the following script to your project's <head> tag:
<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script>Alternatively, if you have a build pipeline you can also install it via npm:
npm install @tailwindplus/elementsNext, import Elements into your root layout:
import '@tailwindplus/elements';See the Elements documentation for more information.
Creating components
Since the vanilla HTML examples included in Tailwind Plus can't take advantage of things like loops, there is a lot of repetition that wouldn't actually be there in a real-world project where the HTML was being generated from some dynamic data source. We might give you a list component with 5 list items for example that have all the utilities duplicated on each one, whereas in your project you'll actually be generating those list items by looping over an array.
When adapting our examples for your own projects, we recommend creating reusable template partials or JavaScript components as needed to manage any duplication.
Learn more about this in the "Using components" documentation on the Tailwind CSS website.