If you want to style your apps with a fast, flexible, and reliable framework, Tailwind CSS is a great option. Tailwind is a CSS framework that helps you design custom web components. You can design components without having to switch back and forth between HTML and CSS files.

Unlike Bootstrap, Tailwind does not have pre-defined classes. Instead, you get to customize your own. With Tailwind, you can build complex components with primitive utilities, functions, and directives.

Learn how to install and use Tailwind to create amazing user interfaces in your Next.js projects.

Install Tailwind CSS in Next.js

Get started by installing Tailwind in a Next.js application. The process is similar to installing Tailwind in a React app, with a little difference in the configuration process.

Go to the Tailwind CSS installation page. Then go to the Framework Guides section and select Next.js. This section contains all the instructions you need to set up Tailwind in your Next.js project.

To install Tailwind via npm, the JavaScript package manager, run these two terminal commands: 

        npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

These commands create two config files named tailwind.config.js and postcss.config.js in the root project folder. These files indicate that TailwindCSS was successfully installed. You can also install Tailwind CSS through the Tailwind CLI or as a PostCSS plugin.

Configure Templates

After installation, you must configure the template paths provided in the installation guide to your app config file. Add the following code to the tailwind.config.js file: 

        /** @type {import('tailwindcss').Config} */ 
module.exports = {
    content: [ 
        "./app/**/*.{js,ts,jsx,tsx}",
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",

        // Or if using `src` directory: 
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: { 
        extend: {},
    },
    plugins: [],
}

Add Tailwind Directive to App

Next, add the following Tailwind directives to your App CSS file. This is the file named global.css. You should delete the contents of the global.css file and add the Tailwind directives. 

        @tailwind base;

@tailwind components;

@tailwind utilities;

Run Build Process

Now, on the terminal, run the CLI tool with the following command: 

        npm run dev

This command scans your template files for classes and builds your CSS. It will open a port for you to view the browser.

Tailwind opened port to view browser

Now, if you navigate to the server at http://localhost:3000 you will see your app. You should notice a slight change in the content. This indicates that the installation process is a success, and Tailwind CSS is live.

Use Tailwind in the Project

Next, let's test Tailwind CSS features by applying classes to your project. For example, you have an app with the text "Hello Tailwind". You want to give it a red color with a light blue background.

Create a Home.tsx file then add the following code: 

        export default function Home() {
    return (
        <body className="bg-blue-300">
            <h1 className='text-red-900'>Hello Tailwind CSS</h1>
        </body>
    );
}

Now, when you navigate to the browser, you will see the text changed to red, and the background is blue.

TailwindCSS effect on text

You can explore other Tailwind CSS features to style other components of your app. The conditional modifiers allow you to create reactive states like hover and focus. You can also customize your pages to dark and light modes according to the user's preference.

Advantages of Using Tailwind CSS

Made by Adam Wathan in 2017, Tailwind CSS differs from other CSS libraries in many ways. It has zero run-time, making it lightning fast. And is easy to install. Tailwind scans all HTML files and JavaScript components for class names on your app. It then generates the corresponding styles that design the elements.

Tailwind CSS allows you to design complex components from primitive utilities. You can reuse styles across components and use modifiers to style responsive UIs. Use the steps here to learn how to install and use Tailwind CSS to customize apps that match your brand.