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.