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?

Improve this question
3
  • 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. Commented May 26, 2022 at 11:23
  • hey eagor, did you figure this out? Commented Jun 4, 2022 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. Commented Jun 4, 2022 at 15:45

1 Answer 1

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.