Integrating TailwindCSS in Next.js
TailwindCSS is a utility-first CSS framework that allows you to build any user interface using pre-made CSS classes that map CSS rules in a straightforward way.
Unlike Chakra UI, Material UI, and many other UI frameworks, it just provides CSS rules; the framework gives no JavaScript scripts or React components, so we'll need to write them by ourselves.
Its main strengths are the following:
- Framework agnostic: You can use TailwindCSS in React, Vue, Angular, and even in plain HTML and JavaScript. It's just a set of CSS rules.
- Themeable: Just like Chakra UI, you can customize all the TailwindCSS variables to make them match your design tokens.
- Dark and light theme support: You can easily enable or disable the dark theme by modifying a specific CSS class from the
<html>element. - Highly optimized: TailwindCSS is formed of many CSS classes, but it's able to prune the unused ones at build time, reducing the...
