tailwindcss-setup-examples icon indicating copy to clipboard operation
tailwindcss-setup-examples copied to clipboard

Published 20 hours ago • verified publisher icon tailwindlabs

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

Open benbender opened this issue 5 years ago • 4 comments

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

benbender avatar Sep 07 '20 11:09 benbender

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

kirillplatonov avatar Sep 15 '20 12:09 kirillplatonov

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

nnennajohn avatar Dec 17 '20 02:12 nnennajohn

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

MaciejWiatr avatar Mar 17 '21 01:03 MaciejWiatr

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

benbender avatar Mar 17 '21 21:03 benbender