Install Tailwind CSS

1. Install Tailwind CSS

Begin by installing Tailwind CSS and its peer dependencies using npm or yarn:

npm install -D tailwindcss postcss autoprefixer

Or if you're using yarn:

yarn add -D tailwindcss postcss autoprefixer

2. Initialize Tailwind CSS

Next, initialize Tailwind CSS by generating a `tailwind.config.js` and `postcss.config.js` file:

npx tailwindcss init -p

3. Configure Tailwind in your CSS

Open your `tailwind.config.js` file and add the paths to all of your template files:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. Add Tailwind to your CSS

Create a CSS file (e.g., `globals.css`) in your `styles` folder and add the following lines to include Tailwind's base, components, and utilities:

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

5. Import the CSS File

Finally, import the `globals.css` file in your `pages/_app.js` file:

import '../styles/globals.css';

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

export default MyApp;

6. Start Your Development Server

You can now start your development server to see Tailwind CSS in action:

npm run dev

Or, if you are using yarn:

yarn dev