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
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 @ts-ignore
just do ./src/**/*.{js,jsx,ts,tsx}
View full answer

13 Replies

James4u
you can try to build your project and see if your tailwindclass names are there inside bundle css
@James4u you can try to build your project and see if your tailwindclass names are there inside bundle css
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 ?
James4u
show me your tailwind.config.js
@James4u show me your tailwind.config.js
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....
@James4u show me your tailwind.config.js
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
Answer
@California pilchard kill me
James4u
you saved yourself! 🤣
James4u
@California pilchard mark solution to close to the thread! 🙂