如何在React Server组件(Next.js)中使用TailwindCSS

Question

尝试新的React Server Components (with Next.js)，但是当将_app.tsx重命名为_app.server.tsx时，根本不加载TailwindCSS样式(html呈现良好)。

_app.tsx是导入包含所有@tailwind指令的全局index.css文件。试图移动这个css导入到...client.tsx组件，但显然Next不允许。

有没有人成功地让顺风与服务器组件一起工作?

Answer 1

在tailwind.config.js文件中，您应该应用tailwind需要影响的文件夹和文件，如下所示:

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

同时，检查您是否按照tailwind的安装过程安装到您的下一个.js项目中:

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