英文:
Weird UI rendered using tailwindcss and Nextjs
问题
Here is the translated content:
所以，我正在尝试使用Next.js、TypeScript和Tailwind CSS。我进行了初始提交，然后开始修改layout.tsx文件。
这是在运行开发服务器后我得到的结果：
这是layout.tsx文件的内容：
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: "一个简单的测验应用",
};
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只包含一个带有h1标签的div。
这是tailwind.config.js文件的内容：
/** @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: [],
};
预期的渲染应该是一个连续的slate-700颜色背景。
将不需要翻译的部分保留为原文。
英文:
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
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.
答案1
得分: 1
我知道问题出在哪里了。感谢 @wongjn 指出这一点。是 globals.css 文件我没有检查。它有线性渐变的设置和一些东西，导致输出呈现成那样。
英文:
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
去到 globals.css，并更改 body 的样式。所以不要使用默认的渐变，而是像这样：
body {
color: rgb(var(--foreground-rgb));
background: var(--background-rgb);
}
然后按照您的喜好自定义 --background-rgb。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论