How to apply Tailwindcss to specific pages in NextJS?

1. First, install TailwindCSS. If TailwindCSS is not already installed in your project, run the necessary installation commands:

bash
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

The above commands will create the tailwind.config.js and postcss.config.js files and install the required dependencies.

1. In the tailwind.config.js configuration file, ensure that the content array is correctly configured so that Tailwind can apply styles to files in your project:

javascript
module.exports = {
  content: [
    // ...
    './pages/**/*.js', // Applies to all pages in the project
    './components/**/*.js', // Applies to all components if needed
    // Other files or directories that need TailwindCSS styles
  ],
  // Other configurations...
};

1. Create or modify styles/globals.css (or your project's global CSS file), and import TailwindCSS's base styles, components, and utility classes at the top of the file:

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

1. Applying TailwindCSS to Specific Pages. To apply TailwindCSS to a specific page, directly include CSS classes in the page's component file. For example, in pages/specific-page.js, you can write:

jsx
export default function SpecificPage() {
  return (
    <div className="p-4 bg-blue-500 text-white">
      {/* Page content */}
      <h1 className="text-2xl font-bold">This is a specific page</h1>
      {/* Other content */}
    </div>
  );
}

In the above example, p-4, bg-blue-500, text-white, text-2xl, and font-bold are utility classes provided by TailwindCSS, which will only apply to the SpecificPage component.

1. On-Demand Styling. For further optimization, to ensure only specific pages load certain styles, use the @apply directive to create custom classes in CSS files and import them only in specific pages. For example:

styles/specific-page.css:

css
.custom-title {
  @apply text-2xl font-bold;
}

pages/specific-page.js:

jsx
import '../styles/specific-page.css';

export default function SpecificPage() {
  return (
    <div className="p-4 bg-blue-500 text-white">
      <h1 className="custom-title">This is a specific page</h1>
    </div>
  );
}

1. For better maintainability, you can also create a dedicated CSS module file for each page (e.g., specific-page.module.css), and import and use these module classes in the page component. CSS modules help avoid global style conflicts and ensure local scope for styles.

Note: In production, TailwindCSS automatically removes unused CSS via PurgeCSS to minimize the final build size. Ensure the content array in tailwind.config.js is correctly set so that TailwindCSS knows which files to scan to determine included styles.