DEV Community

Andy Broger
Andy Broger

Posted on

10

Next.js with tailwindcss

Hey Folks,

First post and i don't like long intros, so mine will be short. Searched for next.js and tailwindcss templates, found a lot, some outdated, some without purging, some too much boilerplate stuff, etc.

So i created my own and here it is:

GitHub logo andybroger / nextjs-tailwindcss

nextjs + tailwindcss template

nextjs-tailwindcss template

next.js template including tailwindcss, check out the jsx-tailwind branch if you need support for @apply rules in styled-jsx.

Features

  • Includes Tailwindcss
  • Includes postcss-preset-env
  • now uses tailwindcss 1.4.x purge method on production builds

usage

  1. Clone this repo
  2. npm install
  3. npm run dev

notes

styles/main.css The styles/main.css files includes tailwindcss imports and also supports global styles. It is processed by postcss and with postcss-preset-env supports nesting and other cool stuff.

postcss.config.js The configuration file for postcss. The purgecss plugin is configured to scan the *.js files in the pages/ and components/ folder.

tailwind.config.js You should know that file, its the default config generated with npx tailwindcss init. It's where your tailwindcss config goes.

pages/_app.js Here we integrate styles/main.css into the app.




some notes

styles/main.css
The styles/main.css files includes tailwindcss imports and also supports global styles. It is processed by postcss and with postcss-preset-env supports nesting and other cool stuff.

postcss.config.js
The configuration file for postcss. The purgecss plugin is configured to scan the *.js files in the pages/ and components/ folder.

tailwind.config.js
You should know that file, its the default config generated with npx tailwindcss init. It's where your tailwindcss config goes.

pages/_app.js
Here we integrate styles/main.css into the app.

Please feel free to comment, if you have any questions.

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (2)

Collapse
 
lhjd profile image
jon

thanks this is really good stuff

Collapse
 
larsolt profile image
Lars

Thanks, very useful

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay