Next.js Discord

Discord Forum

Why tailwind ? just why are u doing this to me ? (className not working)

Answered
California pilchard posted this in #help-forum
Open in Discord
Avatar
California pilchardOP
I BECOME CRAZYYYY. Okay there is the thing, I have a little div like this :
return (
        <div className="bg-red-500">
            Miam cool here
        </div>
    )

Everything fine, I can see my div with a red background. Nice ! I add an extra className p-4. Wow, a padding appear. Awesome !
Lets try with p-10 instead.... Wait where is my padding ? Weird because p-10 exist in tailwind (and I can see the className in DOM). Lets try with p-[100px], still not working. Maybe try with p-6, its working !

So wtf, is it just a problem in cache or idk why dev rendering or something like that ? Why my padding isnt rendered everytime ?
Answered by Yi Lon Ma
just do ./src/**/*.{js,jsx,ts,tsx}
View full answer

13 Replies

Avatar
James4u (Tag me if needed)
you can try to build your project and see if your tailwindclass names are there inside bundle css
Avatar
California pilchardOP
Okay this is crazy, I have this main layout :
'use client'
import React from "react";

export function AppLayout({
    children,
    header,
    className,
 } : {
    children: React.ReactNode
    header: React.ReactNode
    className?: string
 }) {
    return (
        <div className="bg-red-500 p-8">
            Miam cool here
        </div>
    )
}


Inside layout.tsx (from /src/app/layout.tsx) I have this :
'use client'
export default function RootLayout({ children }: AppLayoutProps) {
  return (
    <AppLayout
      header={<Header/>}
    >
      {children}
    </AppLayout>
  );

The className p-8 isnt working but doing this :
export default function RootLayout({ children }: AppLayoutProps) {
  return (
    <div className="bg-red-500 p-8">
            Miam cool here
        </div>
  );
}

its working, jsut why ahaha ?
Avatar
James4u (Tag me if needed)
show me your tailwind.config.js
Avatar
California pilchardOP
My tailwind.confg.js is the exact same as my previous git push. I have my previous git push running in 3001 and its working fine. I try to see the difference but Ive made around 120 pages change soo....
Avatar
California pilchardOP
brooo
im stupid
u was right
Ive move my layout from @/components/layouts/... to @/layouts/... for a better organization. But in tailwind.config.js there is only this :
module.exports = {
  darkMode: ['class'],
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    //missing: './src/layouts/**/*.{js,ts,jsx,tsx,mdx}',
  ],
kill me
Avatar
Yi Lon Ma
just do ./src/**/*.{js,jsx,ts,tsx}
Answer
Avatar
James4u (Tag me if needed)
you saved yourself! 🤣
that's why I wanted you to check your css bundle to see your classnames are there
Avatar
James4u (Tag me if needed)
@California pilchard mark solution to close to the thread! 🙂