**Tailwind** is a popular utility first CSS framework for rapidly building custom User Interfaces. It provides low-level classes, those classes combine to create styles for various components. You can learn more about Tailwind CSS at its official website.                                                                              

**Next.js** is a popular web development framework based on the React library that enables server-side rendering and generating static websites improving development time and website performance.                                                                                                                                           


Setting up a Next.js project with Tailwind CSS
First install Next.js:-

>npx create-next-app my-app

Second installing Tailwind CSS with Next.js as dependencies:- 

>npm i -D tailwindcss postcss autoprefixer

Third generate Tailwind configuration files with the following command:

>npx tailwindcss init -p

The above command will add the tailwind.config.js and postcss.config.js files to the root of our project.                                                                                                                                                     


Below is the link to github for next.js & tailwindcss boilerplate:- 
    [https://github.com/ddoria921/nextjs-tailwind-starter](https://github.com/ddoria921/nextjs-tailwind-starter)

large_1_BbtYIt-OJNXdKs8hA05ZQw.png

Next Js with tailwind css

Signup to our newsletter