CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Andrex
Andrex

Reputation: 287

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

Upvotes: 4

Views: 5949

Answers (4)

Ravinder
Ravinder

Reputation: 1

Import global css file into root layout.jsx file app/layout.jsx

Upvotes: 0

Bibek Oli
Bibek Oli

Reputation: 876

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";

Upvotes: 5

mramsath
mramsath

Reputation: 807

I had to create my _app.js file inside src/pages directory which is not by default created with create-next-app command, and had to import globals.css file insdie the _app.js

import React from "react";
import "**@/styles/globals.css**";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Upvotes: 1

Andrex
Andrex

Reputation: 287

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.

Upvotes: 3

Related Questions