[SOLVED] Tailwind not applying styles to pages in Nextjs but applies to index page

Tailwind not applying styles to pages in Nextjs but applies to index page

Brand new to Tailwind and Nextjs, but have made some projects in the past with create-react-app. I'm struggling to figure out why Tailwind is not applying styles to my pages, but applies styles to my index page (page.tsx). Directly importing Tailwind to test.tsx applies the styles but I would rather have Tailwind be applied to everything with just the single import in layout.tsx.

globals.css:

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

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './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: [],
}

layout.tsx:

import type { Metadata } from 'next'
 
import './globals.css'
 
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
    children,
}: {
    children: React.ReactNode
}) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    )
}

Folder Structure (Only showing relevant files and folders):

.
├── app
│   ├── globals.css
│   └── layout.tsx
│   └── page.tsx
├── pages
│   └── test.tsx
├── tailwind.config.js
└── package.json

Solution

Everything was configured correctly. I had to somehow refresh my tailwind.config.js file to apply the Tailwind classes to test.tsx. See Victor L's comments for more detail.