How to setup nextjs and tailwind css project

 

NextJS is a javascript-based Reactjs based front-end tool to build SEO-based web projects which meats the basic optimization for the search engine like google, bing, yahoo, etc.

NextJS

Some advantages rather than ReactJS in NextJS projects like:-

1. Zero Config:- build-in automatic typescript support and integrated type checking.
2. File System Based Dynamic Routing:- In the NextJS project does not require routing because it uses file structure as a routing system.
3. API Routes:- Quickly build back-end application endpoints, leveraging hot-reloading and a unified build pipeline.

NextJS is based on ReactJS and ReactJS is a javascript library, then if you have already knowledge about javascript and react you can easily create NextJS application.

Tailwind CSS

Tailwind CSS is a class-based CSS framework that you can use to create multiple device style based on classes and it is based on css3 which have many types of classes like breakpoint classes, typography, grid, flex, spacing, sizing, width, height, and many other classes available click here.

How to setup Nextjs with the tailwind CSS

Firstly you can install NextJS in the directory using the following command:

npx create-next-app@latest project_name
# or
yarn create next-app project_name

If you are using typescript to run the following command:-

npx create-next-app@latest project_name --typescript
# or
yarn create next-app project_name --typescript

After installing go to the project directory in cmd and run the following command to test the project is working.

npm run dev
# Starts the development server.

npm run build
# Builds the app for production.

npm start
# Runs the built app in production mode.

After running the command it will run on the http://localhost:3000 port in the local system.

And the directory structure of the NextJS is:-

After running successfully we will be installing tailwind css library in NextJS project using the following commands:-

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The first command is to install the tailwind and dependency library and the second one is to create the tailwind config files which are required to access and compile the tailwind and NextJS codes.

After running the second command it will create two files in the project directory tailwind.config.js and postcss.config.js.

In NextJS project structure, the main file folder is pages the first page which is rendered after the running project is the pages/index.js or pages/index.tsx which is based on the project compiler.

But after installing tailwind you can configure to another folder for compilations and relative path for usage component inside another component.

Setting example of tailwind.config.js,

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

In this to config which file type to compile with tailwind CSS styles, like pages is the main routing and file structure to run in NextJS but if you are using another folder for creating child and reusable component then tailwind.config.js file id desid to compile with tailwind CSS.

After that make sure to add ./styles/globals.css tailwind components which is already used in the NextJS styles.

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

After you can make changes using Tailwind CSS documentation and run the NextJS project to test it is working.

In This, I have learned to set up Nextjs with tailwind CSS and make a SPA/SSR project with responsive and attractive front-end CSS framework tailwind CSS.