Question 206804 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Weird UI rendered using tailwindcss and Nextjs

So i was trying out Next.js with typescript and tailwindcss. I did the initial commit and then started modifying the layout.tsx file.

This is what I get after running the dev server

enter image description here

This is the content of layout.tsx file:

import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";

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

export const metadata: Metadata = {
  title: "Quiz app",
  description: "A simple quiz app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body
        className={`${inter.className} bg-slate-700 container mx-auto p-4 text-slate-100`}
      >
        {children}
      </body>
    </html>
  );
}

page.tsx only has a div with h1 tag in it

Here is the tailwind.config.js file content:

/** @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: {},
  plugins: [],
};

The expected render should’ve been a continuous background of slate-700 color.

Any help will be appreciated.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got to know where the issue was. Thanks to @wongjn for pointing this out. It was the globals.css file that I haven't checked. It had the linear-gradient settings and stuff that was rendering the output like that.


  2. 0

    Go to globals.css and change the styles for body. So instead of the default gradient, something like this:

    body {
  color: rgb(var(--foreground-rgb));
  background: var(--background-rgb);
}

    And customize --background-rgb as you like.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search