Better Default Styling
Used in this guide:Next.js 16.0.3
Tailwind CSS 4
Global Styling
@import "tailwindcss";
@theme inline {
--color-background: #212325;
--color-foreground: #d9dee9;
--color-bgOverlay: #171718;
--color-accent: #e7912e;
--color-accentPop: #ff8902;
--color-accentContent: #ffffff;
--color-textLight: #A6A6A6;
--color-mute: #34373b;
--color-underline: #3a3d3f;
}
:root {
--background: #E9ECF0;
--foreground: #4f5563;
--bgOverlay: #FFFFFF;
--accent: #e7912e;
--accentPop: #ff8902;
--accentContent: #ffffff;
--textLight: #797e88;
--mute: #d1dae6;
--underline: #d1d4d8;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #212325;
--foreground: #d9dee9;
--bgOverlay: #171718;
--accent: #e7912e;
--accentPop: #ff8902;
--accentContent: #ffffff;
--textLight: #A6A6A6;
--mute: #34373b;
--underline: #3a3d3f;
}
}
@layer base {
input, textarea, select {
@apply outline-none focus:outline-none;
@apply bg-transparent text-inherit caret-inherit;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
h1, h2 {
font-weight: 600;
color: var(--foreground);
}
p {
font-size: 15px;
color: var(--textLight);
}
.mainLayout {
width: 100%;
margin-inline: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.nextImage {
object-fit: cover;
overflow: hidden;
overflow-clip-margin: unset;
}
.buttonBase {
padding: 8px 16px 8px 16px;
background: var(--accent);
color: var(--accentContent);
border-radius: 6px;
font-size: 14px;
cursor: pointer;
}
.buttonBase:hover {
background: var(--accentPop);
}
.inputBase {
background-color: var(--mute);
padding: 16px;
font-size: 14px;
width: 100%;
}
}
Layout
import type { Metadata } from "next";
import { Inter } from 'next/font/google';
import "./globals.css";
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: "My Site",
description: "JKTurner Template",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>
<div className="flex flex-col min-h-[101vh] overflow-x-hidden relative">
{/* Header Placement */}
<div className="mainLayout">
{children}
</div>
<div className="place-content-end flex-1 w-full">
{/* Footer Placement */}
</div>
</div>
</body>
</html>
);
}