Next.js Tailwind CSS

Using Tailwind CSS in a Next.js project is a very popular choice because it provides a utility-first approach to writing CSS, allowing you to apply styles directly in class names. This approach makes style writing more concise and intuitive.

Tailwind CSS Tutorial:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Tailwind CSS Official Website:https://tailwindcss.com/

GitHub Address:https://github.com/tailwindlabs/tailwindcss

Tailwind CSS is a powerful CSS framework that makes style writing more concise and modular through a utility-first approach. Unlike traditional class-based CSS frameworks, Tailwind provides a set of low-level utility classes that can be used directly on HTML elements to quickly and flexibly build custom designs.

The following are the detailed steps on how to use Tailwind CSS in a Next.js project.

1. Install Tailwind CSS

If you are creating a new Next.js project from scratch, you can use create-react-app. If you already have an existing React project, you can skip the project creation step.

Create a new Next.js project:

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

During creation, you will be prompted whether to install Tailwind CSS, and we can select Yes:

...
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
...

Install Tailwind CSS

You can also run the following command in your project directory to install Tailwind CSS and its required dependencies:

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

This will create a tailwind.config.ts file and a postcss.config.mjs file.

2. Configure Tailwind CSS

In the Tailwind configuration file tailwind.config.ts, add the file paths where Tailwind class names will be used.

Generally, it is configured by default, so we don't need to modify it:

Example

import type { Config } from "tailwindcss";

export default {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}", // Note that the app directory has been added.
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
},
plugins: [],
} satisfies Config;

We don't need to modify the postcss.config.mjs file.

3. Add Tailwind Base Styles

Add Tailwind CSS directives to the application's global stylesheet. Tailwind will use these directives to inject the styles it generates.

In your project, open the app/globals.css file and add the following content to include Tailwind's base styles, component styles, and utility styles:

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Import the globals.css stylesheet in the root layout app/layout.tsx to apply the styles to every route in the application:

Example

// app/layout.tsx
// These styles will be applied to every route in the application
import './globals.css'

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>{children}</body>
</html>
)
}

4. Use Tailwind CSS to Write Styles

After installing Tailwind CSS and adding global styles, you can use Tailwind's utility classes in your application:

app/page.tsx file code:

// app/page.tsx
export default function Home() {
return (
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
<div className="bg-white p-8 rounded-lg shadow-lg">
<h1 className="text-2xl font-bold text-gray-900">Hello, EXAMPLE!</h1>
<p className="mt-4 text-gray-600">Example Tutorial, what you learn is not only technology, but also a dream!</p>
<button className="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
Click me to try
</button>
</div>
</div>
);
}

Run:

npm run dev

Then open your browser and navigate to http://localhost:3000, and you should see a simple React application styled with Tailwind CSS.

Through the above steps, you have successfully integrated Tailwind CSS into your Next.js project and used it to write styles. Tailwind CSS's utility class names allow you to quickly add styles to your components while keeping the style code concise and modular.

Other Extensions