Modernize example for nextjs. Adds support for fast refresh, native p…

tailwindlabs / tailwindcss-setup-examples

674 stars 173 forks source link

Modernize example for nextjs. Adds support for fast refresh, native p… #90

Open benbender opened 4 years ago

benbender commented 4 years ago

Modernize example for Nextjs.

This pull-request is a result of the discussion about issues integrating nextjs/tailwindcss at the Nextjs-repo: https://github.com/vercel/next.js/issues/13488

Adds support for/fixes:

fast refresh
native purge
respects nextjs custom postcss-guidelines [1]
fixes displayname of Indexpage
Updates and fixes dependencies to latest stable

[1] https://nextjs.org/docs/advanced-features/customizing-postcss-config

kirillplatonov commented 4 years ago

I just tried it on a newly created app. It reloads instantly with these changes 👍

nnennajohn commented 3 years ago

Was having the same problem with compile time. This worked like a charm. Thank you.

MaciejWiatr commented 3 years ago

Is This thread alive? I'd love to see This merged. And also could you create separate repo just for this next/tailwind config? It would be very helpful @benbender

benbender commented 3 years ago

Just threw a template together:

Repo:

https://github.com/benbender/tailwindcss-nextjs-ts

Preview deployed to:

https://tailwindcss-nextjs-ts.vercel.app/

Additional featues:

NextJS 10
Typescript 4.2
Tailwind 2 incl. the new JIT-Compiler
Critical css-extraction on production
Mixed css with tailwind, css-modules and normal css for demo-purposes
Extensive ESLint+Prettier linting + autoformatting in VSCode
100 Score on all tests in lighthouse