Customizing Next.js 14 Layouts with Tailwind CSS

Demonstrate the integration of Tailwind CSS with Next.js 14 to rapidly customize and build complex layouts with utility-first CSS classes.

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

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

export default MyApp;

This is the Next.js custom App component that initializes pages. It imports the global stylesheet where Tailwind CSS directives will be placed.

// styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

This is the global stylesheet file where Tailwind CSS directives are imported. It allows Tailwind to inject its base, component, and utility styles.

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

This is the Tailwind CSS configuration file. It specifies where Tailwind should look for class names (in the pages and components directories) and allows customization of the theme.

// pages/index.js
export default function Home() {
  return (
    <div className='flex justify-center items-center h-screen'>
      <h1 className='text-5xl font-bold'>Welcome to Next.js with Tailwind CSS!</h1>
    </div>
  );
}

This is a sample index.js file showcasing a basic layout using Tailwind CSS utility classes for styling. It centers a heading on the screen both vertically and horizontally.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

This is the PostCSS configuration file necessary for processing Tailwind CSS. It includes the tailwindcss plugin and the autoprefixer for adding vendor prefixes to CSS rules.

// package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "latest",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "tailwindcss": "^3.0.0",
    "postcss": "^8.0.0",
    "postcss-preset-env": "^7.0.0",
    "autoprefixer": "^10.0.0"
  }
}

This is the package.json file displaying the necessary scripts and dependencies for running a Next.js project with Tailwind CSS. It includes development dependencies for Tailwind CSS and PostCSS.