tailwindCSS

Install Tailwind CSS in Next.js?

Tailwind is a modern build responsive website CSS framework. Tailwind framework built with javascript, HTML, and CSS.

Tailwind is a great CSS framework for rapidly building websites. Suppose someone asks me to choose CSS frameworks in bootstrap and tailwind CSS. I select bootstrap because bootstrap is an old CSS framework. I used bootstrap lots of times in past projects. Right now, as a modern area of technology. Many companies hire front-end developers with tailwind CSS frameworks nowadays. There a serval reasons why the Tailwind CSS framework is a very high-demand technology in the front-end world.

1. Easy to remember CSS class name.
2. Tailwind never sends unused CSS on production.

I mention two benefits of tailwinds. I know There is a lot of help with a tailwind CSS framework. But I share two that are more critical for me. That is why I understood the tailwind importance and started to learn. If you learn more, then feel free to read these blogs.

Project Demo

How to install Tailwind CSS in Nextjs?

Install Tailwind CSS framework in Nextjs with npm and yarn package manager. You easily install the Tailwind CSS framework with five steps.

1. Install Tailwind CSS framework
2. Configure your template paths
3. Add the Tailwind directives to your CSS
4. Start your Dev Server
5. Start using Tailwind CSS in your project

Install Nextjs

You install the nextjs framework in your project, use create-next-app command.

npx create-next-app project-name
cd project-name

If you have already created your nextjs app, skip this and follow the tailwind installation steps.

Install Tailwind CSS framework

Your nextjs app is already created, and now you install tailwind CSS formwork with npm and yarn. You paste the following command.

npm install -D tailwindcss postcss autoprefixer
 or
yarn add -D tailwindcss postcss autoprefixer

Now install tailwind CSS successfully with all helping packages. You run the Tailwind init command in the terminal. init command generates both tailwind.config.js and postcss.config.js.

npx tailwindcss init -p

Configure your template paths

In your tailwind.config.js the file, you add all template paths. Official configuration only adds pages and components folder paths. If you have any other path, mention it in the content array.

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

Add the Tailwind directives to your CSS

Adding your tailwind directive means adding a tailwind CSS file in the nextjs CSS global file.

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

Note

Make sure your nextjs global file imported in _app.js custom file.

Start your Dev Server

Now all your configuration is done in the nextjs project. Now you run the nextjs dev server in nextjs.

npm run dev

Start using Tailwind CSS in your project.

Your configuration is done, and your local dev server also starts running. Right now, you add tailwind CSS in your nextjs with a happy face.

<div className="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">

   <p className="text-white font-extrabold text-3xl md:text-5xl">   Ghostwind CSS
   </p>

<p className="text-xl md:text-2xl text-gray-500"> Welcome to my Blog </p>
</div>

You Install Nextjs with Tailwind Preconfig Setup

You install nextjs with tailwind pre-config setup for the project. The nextjs team provided all examples. In setup, all configs are added by default in your project.

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Project Demo

Reference

https://tailwindcss.com/docs/guides/nextjs

https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

Read the previous post

Conclusion

I hope you easily understand the tailwind installation setup. I will try my best if you have any queries or questions, ask me in the comment section.