Integrating Headless UI with Next.js

As we saw in the previous lesson, TailwindCSS only provides CSS classes to be used inside any web component. If we want to implement something dynamic, such as a modal, a switch button, and so on, we need to write some JavaScript logic on our own.

Headless UI solves this problem by providing the opposite of TailwindCSS: dynamic components without any CSS class or style. That way, we’re free to use TailwindCSS or any other CSS framework to style prebuilt components in a straightforward way.

Headless UI is a free and open-source project created by the Tailwind Labs team (the same organization behind TailwindCSS), and we can browse the source code on GitHub.

Integrating Headless UI and TailwindCSS is not very different from integrating TailwindCSS alone. We can set up a new project and install all the TailwindCSS dependencies just like we did earlier. After that, we can install Headless UI itself. We will also install classnames, a simple and widely used utility that will help us create dynamic CSS class names.

Develop a simple menu component

We’ll now develop a simple Menu component by using Headless UI and TailwindCSS.

Let’s go to the pages/index.js file and import Headless UI, classnames, and Next.js’s Link component: