There are several sets of pre-designed TailwindCSS components that can be incorporated into web projects.

Today I explore TailwindUI which has been designed by the creators of TailwindCSS, Adam Wathan and Steve Schoger, who are also authors of Refactoring UI.

TailwindUI is currently in “Early Access” which means it is not finished yet, but there are already over 300+ components. The components are not free, and require a one-time payment which depends on which set of components you buy. The authors promise to release new components every month until they are “out of ideas.”

The components are written in pure HTML using TailwindCSS for styling, so can be incorporated into any project using any technology stack easily.

Interactive behaviour (such as opening and closing menus, dropdowns etc.) relies on the HeadlessUI library, which is in early stages but promises to be “completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.” The current version of the library supports React and Vue but may support other frameworks such as Alpine in the future.

HeadlessUI only supports a few components at present, but I am interested to see how it will evolve and whether it will become a complete UI system:

• Transition
• Menu Button (Dropdown)
• Listbox (Select)
• Switch (Toggle)

There are two packages of components in TailwindUI:

• Application UI
• Marketing

The Application UI package covers things like

• Application Shells (Stacked, Sidebar, Multi-column)
• Headings (Pagem Card, Section)
• Data Display (Description Lists, Stats)
• Lists (Tables, Stacked, Grid)
• Forms (Form Layouts, Input Groups, Select, Signin/out, Radio Groups, Toggles, Action Panels)
• Feedback (Alerts)
• Navigation (Navbars, Pagination, Tabs, Sidebar, Breadcrumb, Steps)
• Overlays (Modals, Slide-overs, Notifications)
• Elements (Avatars, Dropdowns, Badges, Buttons, Button Groups)
• Layout (Containers, Panels)

The Marketing package covers:

• Page Sections (Heros, Features, CTAs, Pricing, Headers, FAQs, Newsletters, Stats, Testimonials, Blog, Contact, Team, Content, Footers, Logo Clouds)
• Elements (Headers, Banners, Flyout Menus)

There are also Page Examples combining multiple components into a single page.

If you are not sure whether the packages are worth the money, there are a few “sample components” you can copy and paste for free.

I am intrigued by the concept of TailwindUI, and will like to see how the offering evolves. I will definitely consider it if I was implementing a commercial project. For my personal sites though, I think the components are a bit “bland” and “corporate”.

If you are interested in how the components look like and work together on a real page, please check out my Sample TailwindUI Page which is a version of this site’s homepage rewritten using TailwindUI and HeadlessUI.