Get Up and Running with Next.js and Tailwind CSS: A Step-by-Step Guide

To get started, install Next.js using the following command:

npx create-next-app@latest my-app

To set up a Next.js app with TypeScript and ESLint, use the following command:

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

Note: You can remove either TypeScript or ESLint if you don't need it.

Then, navigate to the project directory by running:

cd my-app

Then, install Tailwind CSS by running the following command:

npm install -D tailwindcss postcss autoprefixer

This command installs tailwindcss, postcss, and autoprefixer as development dependencies in your Next.js project.

tailwindcss is a popular utility-first CSS framework for building responsive and highly customizable user interfaces.

postcss is a tool for transforming CSS with JavaScript, used in this case to process Tailwind's CSS.

autoprefixer is a PostCSS plugin that automatically adds vendor prefixes to CSS properties, ensuring that the styles you write work in as many browsers as possible.

Now initializes a configuration file for Tailwind CSS in your project using the below command:

npx tailwindcss init -p

tailwindcss init is a command for creating a new configuration file for Tailwind CSS in your project. The -p option stands for --use-preset, which tells the tailwindcss init command to use the default configuration preset for Tailwind CSS. This preset is a good starting point for most projects and includes recommended configuration options for common use cases.

The generated configuration files tailwind.config.js and postcss.config.js will be used to customize the behavior and look of your Tailwind CSS styles. You can use it to define your color palette, font stack, breakpoints, and more.

Add the paths to all of your template files in your 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 the @tailwind directives for each Tailwind’s layers to your globals.css file.

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

Now run your build process with the following command:

npm run dev

Congratulations! You've just enhanced your Next.js app with the power of Tailwind CSS.

For more information, refer to the official Tailwind CSS documentation for Next.js: tailwindcss.com/docs/guides/nextjs