Integrating TailwindCSS in Next.js
Learn how to create website UI using TailwindCSS.
We'll cover the following...
TailwindCSS is a utility-first CSS framework that allows us to build any user interface using premade 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 ourselves.
Advantages of Tailwind
It's main strengths are the following:
Framework agnostic: We 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, we can customize all the TailwindCSS variables to make them match our design tokens.
Dark and light theme support: We 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 final bundle size because unused CSS classes get removed.
Mobile ready: We can use specific CSS classes’ prefixes to apply certain rules to mobile, desktop, or tablet screens only.
In this lesson, we’ll see how to integrate, customize, and optimize TailwindCSS in Next.js by rebuilding the same project we did earlier. That way, the differences between Chakra UI and TailwindCSS will be even more evident.
Let’s start a new project with with-tailwindcss installed. TailwindCSS only requires three devDependencies:
autoprefixerpostcsstailwindcss
As we’ve already seen, TailwindCSS doesn’t ship with any JavaScript utility, so, unlike Chakra UI, we’ll need to manage the dark/light theme switch ourselves. However, we can use the next-themes library ...