Next.js Discord

Discord Forum

Styling Error

Unanswered
Satin posted this in #help-forum
Open in Discord
SatinOP
Hello. I am new to next.js , I don't have anything in my global.css file but still the background is black in browser. Help me !

21 Replies

There might be a tailwind class bg-black, or a style
SatinOP
I checked, but there is nothing related to that.
Anay-208
Umm can you these files here?
So I can continue to help you
SatinOP
// layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}
//page.tsx
import { getAllTodos } from "../../api";
import AddTask from "./components/AddTask";
import TodoList from "./components/TodoList";

export default async function Home() {
  const tasks=await getAllTodos();
  console.log(tasks);

  return (
    <main className="max-w-4xl mx-auto mt-4 rounded-sm">
      <div className="text-center my-5 flex flex-col gap-4">
        <h1 className="text-2xl font-bold text-white">Todo List App</h1>
        <AddTask/>
      </div>
      <TodoList/>
    </main>
  );
}
SatinOP
&913086567042674719 base;
&913086567042674719 components;
&913086567042674719 utilities;
just this
Anay-208
Can you inspect your element?
SatinOP
um yeah. this chunks/css/app/layout.css folder was affecting this
there are thousand of lines of code. what are these for?
:root,
[data-theme] {
  background-color: var(--fallback-b1,oklch(var(--b1)/1));
  color: var(--fallback-bc,oklch(var(--bc)/1));
}
SatinOP
I changed the background color to white from above code.
 <table className="table text-black">
I wrote text-black , then the background color went back to same black
Anay-208
you can just explicitly specify the background color
it could be due to browser injecting the default color
Blue orchard bee
Browser theme can also change the default website background color.
I prefer to not rely on default behaviour and explicitly set the background color of HTML