Next.js Discord

Discord Forum

Cannot get tailwind CSS to work on my components??

Unanswered
Elm sawfly posted this in #help-forum
Open in Discord
Elm sawflyOP
Tailwind CSS is refusing to work on nextjs components

i have the globals.css

/* src/styles/globals.css */

@import "tailwindcss";

:root {
  --color-primary: #00050c;
  --color-base: #fdfdfd;
  --font-sans: var(--font-amazon);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans), system-ui, sans-serif;
  background-color: var(--color-primary);
  color: var(--color-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background-color: var(--color-primary);
  color: var(--color-base);
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


And the header component

/* src/components/Header.tsx*/

"use client";

export default function Header() {
  return (
    <header className="bg-blue-700 h-24">
      <nav>Home</nav>
    </header>
  );
}


import Header from "@/components/Header";
import { AmazonEmber } from "@/fonts/AmazonEmber/amazon-ember";
import LenisSmoothScrollingProvider from "@/providers/lenis-smooth-scrolling";
import "@/styles/globals.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      lang="en"
      className={AmazonEmber.variable}
      suppressHydrationWarning={true}
    >
      <body>
        <LenisSmoothScrollingProvider>
          <Header />
          {children}
        </LenisSmoothScrollingProvider>
      </body>
    </html>
  );
}


And i can see the header appear on the page when i import into my src/app/layout.tsx, but it has 0 stylings, but when i create a seperate Header.css file and use pure CSS and import it into the Header.tsx file i can see the stylings applied???

Why can not use the tailwind directly on the component??
i am using

Next: 15.3.4
Tailwind: 4.1.11

8 Replies

Northeast Congo Lion
Did you add a postcss.config.mjs file?
Anay-208 | Ping in replies
Have you created tailwind.config.ts?
Also, I recommend using pnpx/npx create-next-app if you aren't already with tailwind preset
Chum salmon
I tested you code with newly created Next.js (@latest) project. And I found no issue. Tailwind should work out of the box with Next 15. You don't need additional config.

When you created next-app, did you select tailwind?
Also try restart vscode and see if it fixes.
@Anay-208 | Ping in replies Have you created tailwind.config.ts?
Elm sawflyOP
using tailwind 4 where i was under the assumption a tailwind config file was no longer needed
Northeast Congo Lion
yeah no config is needed. do you see the postcss.config.mjs file? is tailwind shown properly in your packages? What happens if you try removing and re-installing by following the nextjs guide on the tailwind site?