Step 1: Set up a Next.js Project

First, let's set up a new Next.js project. Open your terminal and run the following command:

npx create-next-app my-app

This command will create a new Next.js project named my-app.

Step 2: Install Tailwind CSS

Next, we need to install Tailwind CSS in our project. In your terminal, navigate to the project folder (my-app) and run the following command:

npm install tailwindcss

This will install Tailwind CSS as a dependency in our project.

Step 3: Configure Tailwind CSS

Now, let's configure Tailwind CSS in our Next.js project. Create a file named tailwind.config.js in the root of your project and add the following code:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Step 4: Create a CSS File

In the styles directory of your Next.js project, create a file named global.css. This file will contain your custom CSS styles and imports the Tailwind CSS.

/* styles/global.css */

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Add your custom CSS styles here */

Step 5: Import Tailwind CSS

Next, we need to import the global.css file into our application. Open the _app.js file located in the pages directory and add the following code:

// pages/_app.js
import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Step 6: Start Styling

Congratulations! You have successfully set up Tailwind CSS in your Next.js project. Now, you can start adding Tailwind CSS classes to style your components.

For example, let's style a Button component. Create a new file named Button.js in the components directory and add the following code:

// components/Button.js
import React from 'react';

const Button = ({ text, color }) => {
  return (
    <button className={`p-4 bg-${color}-500 text-white font-bold rounded`}>
      {text}
    </button>
  );
};

export default Button;

In this example, we use the p-4, bg-${color}-500, text-white, font-bold, and rounded classes from Tailwind CSS to style the button component.

Conclusion

In this tutorial, we learned how to style Next.js applications using Tailwind CSS. We walked through the step-by-step process of setting up Tailwind CSS in a Next.js project, configuring it, and applying styles to components.

Tailwind CSS provides a vast range of utility classes that you can easily use to style your components without writing custom CSS. Experiment with different classes and explore the Tailwind CSS documentation to leverage the full potential of this powerful CSS framework.