Next.js Styling Options — Global CSS, CSS Modules & Tailwind
app/globals.css ఫైల్, root layout లో import చేయబడి, మొత్తం app కి apply అవుతుంది — resets, base typography, CSS variables కోసం ideal:
import "./globals.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}CSS Modules (.module.css extension), styles ని ఆ component కి matrame scope చేస్తాయి — class name clashes never happen:
import styles from "./Button.module.css";
export default function Button() {
return <button className={styles.primary}>Start Learning</button>;
}styles.primary, build time లో unique class name (e.g. Button_primary__a1b2c) కి map అవుతుంది — దాని valla ఏ ఇతర component styles తో collision జరగదు.
create-next-app setup లో Tailwind ఎంచుకుంటే, ఇది pre-configured గా వస్తుంది. Utility classes direct ga JSX లో వాడతారు — separate CSS file rాయాల్సిన అవసరం చాలా తక్కువ:
export default function Card() {
return (
<div className="rounded-lg shadow-md p-6 bg-white">
<h2 className="text-xl font-bold">Next.js Course</h2>
</div>
);
}| Approach | Best For |
|---|---|
| Global CSS | Resets, typography, CSS variables, theme colors |
| CSS Modules | Component-specific styles, no naming collisions |
| Tailwind CSS | Rapid development, consistent design system |
| Inline styles | Small, dynamic, one-off style calculations |
Oka project లో Tailwind, CSS Modules, and inline styles anni కలిపి random గా వాడితే, codebase maintain చేయడం కష్టం అవుతుంది. Team-wide ఒక consistent approach (usually Tailwind) ఎంచుకుని, migతా project అంతటా follow చేయడం best practice.
Create a Badge.module.css file with a '.success' class (green background, white text, rounded corners), then use it in a Badge component.
import styles from "./Badge.module.css";
export default function Badge() {
return <span className={styles.success}>Active</span>;
}Q Tailwind, CSS Modules ఒకే project లో కలిపి వాడొచ్చా?
Technically avunu, kani recommended kadు — inconsistency valla codebase maintain చేయడం కష్టం అవుతుంది. ఒక approach ni project-wide standard గా ఎంచుకోవడం better.
Q globals.css ఎక్కడ import చేయాలి?
Root layout.tsx (app/layout.tsx) లో matrame import చేయాలి — అక్కడ import చేస్తే, మొత్తం app కి apply అవుతుంది. Deeni ni prathi page లో repeat గా import చేయాల్సిన అవసరం లేదు.
Q CSS Modules class name collision ఎలా avoid చేస్తాయి?
Build time లో, Next.js prathi class పేరుకు unique hash suffix add చేస్తుంది (e.g., Button_primary__xyz123) — దాని valla వేరే files లో అదే class పేరు వాడినా, styles collide అవ్వవు.