Setting Up Tailwind CSS in NextJs

When it comes to building modern and responsive web applications, the combination of Tailwind CSS and Next.js proves to be a powerful duo. Tailwind CSS provides a utility-first approach to styling, while Next.js offers a robust framework for server-rendered React applications.

Note: To run next project must include node JS in your system version 16.8 or higher

Installation process

1. Start by creating a new Next project using create-next-app. Open your terminal and run the following command:

with npm

npx create-next-app next-tailwind-app

with yarn

npx create-next-app next-tailwind-app --use-yarn

After writing the command below prompt will come one after one for setup, by selecting just yes or no it will going to install all needed packages.

Tailwind CSS is also included on that list so simply select yes and it will install all the required packages like tailwindcss, autoprefixer, and postcss

It will automatically create tailwind.config.js and add the required default configuration.

npx create-next-app next-tailwind-app
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /home/inf/TestAllComponent/next-tailwind-app.

Note: If you not showing above all the configuration list just update new version of create-next-app by below line npm i -g create-next-app

2. Navigate to the project directory.

cd next-tailwind-app

3. Run your project

for setup done with npm
npm run dev

for setup done with yarn
yarn dev

This will start your app on http://localhost:3000.

4. Let's Configure our own project insted of next js landing page

Go to index.js or index.* inside pages folder and modify as you want, example is shown below

export default function Home() {
  return (
    <div className="bg-blue-100 h-screen">
      <span className="font-bold text-5xl">Lorem ipsum</span>
    </div>
  );
}

5. Are you not getting output as you want. Don't worry just go to the global.css inside style folder and remove unnecessary css.

Here i shown CSS Which is must require to pass in global.css.

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

Benifits of using tailwind CSS and Next js

• Responsive design: By combining Tailwind CSS with Next.js, you can easily build responsive web applications that provide a consistent experience across a wide range of devices.
• Rapid development: Tailwind CSS's utility-first approach allows for faster development compared to writing custom CSS styles from scratch. And on other hand Next js comes with features like server-side-rendering, SEO support, Image Optimization, Easy file routing etc.., And Compbination of both will open the wings of web development.
• Component-based architecture: Tailwind CSS + Next JS combination allows for better code organization, maintainability, and reusability of UI components
• Performance optimization: By using Next js's SSR only the necessary code is sent to client so it will reduce load time and improve performance. Tailwind CSS, with its utility-first approach, helps to minimize the amount of CSS generated, resulting in smaller file sizes and faster rendering.
• Developer community and ecosystem: Both Tailwind CSS and Next.js have vibrant and active developer communities. This means that you can find numerous resources, tutorials, and libraries to enhance your development experience.