Tailwind CSS Next.js

Next.js is a popular web development framework based on the React library that enables server-side rendering and generating static websites improving development time and website performance.

This technology is being used by hundreds of thousands of developers and companies such as Vercel, Netflix, TikTok, Twitch, Hulu, Nike and HBO Max since its original release in 2016.

By following this guide you will learn how to properly set up Tailwind CSS with the Tailwind React components inside an existing or new Next.js project.

Requirements #

Make sure that you have Node.js installed on your computer to be able to install Next.js, Tailwind CSS and Tailwind using NPX and NPM.

Create a new project #

1. Run the following command to create a new starter Next.js project:

npx create-next-app@latest --typescript
cd my-app

This command will install all of the necessary dependencies and boilerplate files for a basic Next.js project.

2. Run the following command in your terminal to start a local server:

npm run dev

This will make local development accessible via the browser on http://localhost:3000.

3. Run the following command to build the project files:

npm run build

Install Tailwind CSS #

After you have a working Next.js project the next step would be to follow the installation guide for Tailwind CSS.

1. Install Tailwind CSS, PostCSS and Autoprefixer using NPM:

npm install -D tailwindcss postcss autoprefixer

2. Create a new tailwind.config.js and postcss.config.js file by running the following command in your terminal:

npx tailwindcss init -p

The -p flag will also generate the PostCSS configuration file.

3. Configure the template paths inside the Tailwind CSS configuration file:

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: ['./pages/**/*.{ts,tsx}', './public/**/*.html'],
  plugins: [],
  theme: {}
}

This is needed in order to look for all of the class names inside the project and only include the used ones in the final CSS file.

4. Replace the contents of the styles/globals.css file and import the following directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

With this last change you should now have a proper Next.js and Tailwind CSS configuration set up.

Follow the steps of the next section in this tutorial to start using a library of open-source React components based on Tailwind CSS.

Install Tailwind React #

Tailwind React is an open-source set of interactive React components based on the Tailwind CSS utility-first framework featuring interactive elements such as modals, navbars, dropdowns, carousels, and more.

1. Install the main Tailwind package and Tailwind React via NPM by running the following command:

npm install flowbite flowbite-react --save

2. Require Tailwind as a plugin inside the tailwind.config.js file:

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: ['./pages/**/*.{ts,tsx}', './public/**/*.html'],
  plugins: [require('flowbite/plugin')],
  theme: {}
}

3. Add the source code in the template paths to make sure that dynamic classes from the library will be compiled:

/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: ['./node_modules/flowbite-react/**/*.js', './pages/**/*.{ts,tsx}', './public/**/*.html'],
  plugins: [require('flowbite/plugin')],
  theme: {}
}

Now that you have successfully installed Tailwind React you can start using the components from the library.

Tailwind components #

To get you started you can check out the full collection of React components from the Tailwind React repository and browse the documentation for the source code of each component.

Here’s an example of how you can use the alert component by importing it from the flowbite-react package:

import { Alert } from 'flowbite-react'

export default function MyPage() {
  return <Alert color="info">Alert!</Alert>
}

Here’s another example of how you can use the dropdown component:

import { Dropdown } from 'flowbite-react'

;<Dropdown label="Dropdown button">
  <Dropdown.Item>Dashboard</Dropdown.Item>
  <Dropdown.Item>Settings</Dropdown.Item>
  <Dropdown.Item>Earnings</Dropdown.Item>
  <Dropdown.Item>Sign out</Dropdown.Item>
</Dropdown>

Finally, another example on how you can use the navbar component:

import { Navbar } from 'flowbite-react'

;<Navbar fluid={true} rounded={true}>
  <Navbar.Brand href="https://larntocode.com/">
    <img src="https://larntocode.com/docs/images/logo.svg" className="mr-3 h-6 sm:h-9" alt="Tailwind Logo" />
    <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Tailwind</span>
  </Navbar.Brand>
  <Navbar.Toggle />
  <Navbar.Collapse>
    <Navbar.Link href="/navbars" active={true}>
      Home
    </Navbar.Link>
    <Navbar.Link href="/navbars">About</Navbar.Link>
    <Navbar.Link href="/navbars">Services</Navbar.Link>
    <Navbar.Link href="/navbars">Pricing</Navbar.Link>
    <Navbar.Link href="/navbars">Contact</Navbar.Link>
  </Navbar.Collapse>
</Navbar>

To learn more about Tailwind React make sure to check out to the repository and the main website.

Next.js starter project #

The Tailwind community has created an open-source Next.js starter project that has Tailwind CSS and Tailwind React set up beforehand and you can go ahead and clone it by checking out the repository on GitHub.