2

Trying out the new React Server Components (with Next.js), but when renaming _app.tsx to _app.server.tsx, TailwindCSS styles are not loaded at all (html renders fine though).

_app.tsx is the one importing the global index.css file with all the @tailwind directives. Tried to move this css import to ...client.tsx component, but apparently Next doesn't allow it.

Has anyone had success making Tailwind work with server components?

eagor
  • 9,150
  • 8
  • 47
  • 50
  • Tailwind has a config file that set which files the Tailwind styles get applied to, try looking at that to see if it's included. – Hughes May 26 '22 at 11:23
  • hey eagor, did you figure this out? – Amie Wilt Jun 04 '22 at 13:31
  • @AmieWilt not yet. As workaround you could bundle styles with Tailwind CLI (instead of postcss plugin), and reference the bundled file from the client component. – eagor Jun 04 '22 at 15:45

1 Answers1

2

In the tailwind.config.js file, you should apply what folders and files tailwind needs to affect like so:

content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
],

also, check that you followed the installation proccess of tailwind into your next.js project:

https://tailwindcss.com/docs/guides/nextjs

KobiBen
  • 31
  • 3