Tailwind не применяет стили на подстраницах Next13

Question

Сегодня я начал использовать NextJS, я хочу использовать попутный ветер вместе с ним, следуя этой статье из документации NextJS.

Когда я пытаюсь перейти в основной / каталог, Tailwind работает отлично, проблема возникает всякий раз, когда я пытаюсь зайти в любой из каталогов, находящихся в папке страницы. Tailwind не работает (стили по умолчанию, классы не влияют).

Структура папок (базовая)

      my-app/
├─ app/
│  ├─ globals.css
│  ├─ page.tsx
│  ├─ layout.tsx
├─ pages/
│  ├─ listings/
│  │  ├─ talent.tsx
├─ tailwind.config.js

Конфигурация попутного ветра

      module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Answer 1

В статье, которую вы предоставили, они импортируютgloabls.cssфайл в ихlayout.tsxкомпонент, который затем используется всеми страницами в приложении. Если вы не используете файл макета таким же образом, вам нужно будет импортировать файл CSS на страницы, к которым вы хотите применить стили.

Я предлагаю вам либо использовать компонент макета в вашемpage.tsxфайл, чтобы легко обмениваться стилями между всем приложением, или используйте метод постраничной компоновки, который NextJS объясняет здесь.

Answer 2

добавление

      import 'tailwindcss/tailwind.css';

работал у меня.