Как использовать TailwindCSS с компонентами React Server (Next.js)

Question

Пробуем новые компоненты React Server (с Next.js), но при переименовании в _app.server.tsx, стили TailwindCSS вообще не загружаются (хотя HTML рендерится нормально).

_app.tsxтот, кто импортирует глобальный index.cssфайл со всеми @tailwindдирективы. Пытался переместить этот импорт css в ...client.tsxкомпонент, но, по-видимому, Next не позволяет этого.

Кому-нибудь удалось заставить Tailwind работать с серверными компонентами?

Answer 1

В файле tailwind.config.js вы должны указать, какие папки и файлы должны быть затронуты попутным ветром, например:

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

также убедитесь, что вы выполнили процесс установки tailwind в свой проект next.js:

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