Reader small image

You're reading from  Real-World Next.js

Product typeBook
Published inFeb 2022
Reading LevelBeginner
PublisherPackt
ISBN-139781801073493
Edition1st Edition
Languages
Tools
Right arrow
Author (1)
Michele Riva
Michele Riva
author image
Michele Riva

Michele Riva is a passionate and experienced Software Engineer and Google Developer Expert from Milan, Italy. During the last years, he has contributed to many open-source projects from big companies and foundations, such as Facebook and Apache, in many different programming languages and paradigms, including Haskell, Erlang, Go, and JavaScript. He has also written dozens of public domain articles on different topics (software architecture, functional programming, performance enhancements, etc.) and gave many talks at conferences and meetups. He is currently working as a Senior Software Engineer in the architecture team at ViacomCBS, where he is building a multi-tenant Node.js application at the heart of their websites and streaming services.
Read more about Michele Riva

Right arrow

Integrating Headless UI

As we saw in the previous section, 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 pre-built 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 if you're interested, you can browse the source code at the following URL: https://github.com/tailwindlabs/headlessui.

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 in the previous section...

lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Real-World Next.js
Published in: Feb 2022Publisher: PacktISBN-13: 9781801073493

Author (1)

author image
Michele Riva

Michele Riva is a passionate and experienced Software Engineer and Google Developer Expert from Milan, Italy. During the last years, he has contributed to many open-source projects from big companies and foundations, such as Facebook and Apache, in many different programming languages and paradigms, including Haskell, Erlang, Go, and JavaScript. He has also written dozens of public domain articles on different topics (software architecture, functional programming, performance enhancements, etc.) and gave many talks at conferences and meetups. He is currently working as a Senior Software Engineer in the architecture team at ViacomCBS, where he is building a multi-tenant Node.js application at the heart of their websites and streaming services.
Read more about Michele Riva