Skip to main content

Setup tailwindcss with nextjs

· One min read
Naseel Niyas

Setup Tailwind CSS with Next.js​

image.png

Tailwind css is Super Awesome. It is my favorite CSS Framework. This post is all about setting it up with Next.js (My Favorite JavaScript framework)

The Shorter way

If you have not yet created a next.js project, then use this command to set it up with tailwind preconfigured for you!

npx create-next-app -e with-tailwindcss next-tailwind

Then Change your directory:

cd next-tailwind

And start the server:

npm run dev

The Second Approach

If you have already got a project, it still is simple!

First install a few dependencies:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

This should install tailwind, postcss and autoprefixer

Next, Get generate your configuration for Tailwind and Postcss.

npx tailwindcss init -p

Then, import it in your pages/_app.js file

import 'tailwindcss/tailwind.css';

Finally, Run your server

npm run dev

That was all you needed to do to have tailwind in your project. If you apply a class now, it will reflect on the webpage.

Tailwind CSS Next.js