Nextjs with TailwindCSS

Tailwind CSS is becaming very popular and it is very developer friendly utility-first CSS framework. If you haven’t used tailwindCSS before you can start looking their documentation.

Setup

Create your nextjs application first

npx create-next-app tailwind-demo

After you create your nextjs application we changed directory to the project

cd tailwind-demo

Setup required node modules for tailwind

yarn add tailwindcss 
yarn add -D postcss postcss-preset-env

After successfully installed required packages now we can create required configuration files.

Configuration

There are 2 configuration files we need to add our project.

• tailwind.config.js
• postcss.config.js

Tailwind configurations will be created after running this command as below.

npx tailwindcss init -p

Tailwind configuration file used for configuring your styles in the project.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  }…