javascript - Att använda ruttgrupp i NextJS 13 får Tailwind att sluta fungera

I min NextJS 13-app slutar Tailwind-klasser att tillämpas när jag flyttar page.tsx/layout.tsx från roten av min appkatalog till en (main)-katalog (också i roten av min appkatalog). Jag föreställer mig att det finns någon konfiguration någonstans som blir ogiltig när jag använder route-gruppen, men jag är inte säker på vad det är.

Det här är min tailwind.config-fil:

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
    },
  },
  plugins: [],
}
export default config

Svar #1

I mitt fall skapade jag en UI-komponent i en annan mapp och glömde att lägga till den i (content)-delen i tailwind.config. Men om det inte är ditt fall, kolla också denna lösning som nämndes i Tailwinds GitHub-ärenden:

content: [
'./src/app/(group-name)/**/*.{js,ts,jsx,tsx,mdx}',
]

Svar #2

du behöver importera globals.css där du har direktiven:

@tailwind base;
@tailwind components;
@tailwind utilities;

in i alla rotlayouter av de nya rutgrupperna. Du kan bara ha 1 global css i rotkatalogen

Relaterade artiklar