Menu
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
297
asked Nov 07 '25 21:11
It is not applying styles to pages route because it was only imported in app/layout and works only for routes in app directory.
To apply for routes in pages as well, you need to import globals.css in the routes on /pages.
import "@/styles/globals.css";
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
