Using route group in NextJS 13 stops tailwind from working

Question

In my NextJS 13 app, Tailwind classes stop being applied when I move page.tsx/layout.tsx from the root of my app directory into a (main) directory (also in the root of my app directory). I imagine there is some config somewhere that is becoming invalidated when I use the route group, but I'm not sure what it is.

This is my tailwind.config file:

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

Answer 1

In my case, I created a UI component in another folder and forgot to add that to the (content) section in tailwind.config. but if it is not your case check this solution too which was mentioned in tailwind GitHub issues:

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

Answer 2

you need to import the globals.css where you have the directives:

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

into all the root layouts of the new route groups. You can just have 1 global css in the root directory