英文:
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"><bodyclassName={`${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"><bodyclassName={`${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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论