Setup Tailwind CSS with Next.js

Setup Tailwind CSS with Next.js

Naseel Niyas

Published on Sep 30, 2021

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

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:

yarn dev
# or
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

yarn dev
# or
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

 
Share this