Forem: Md Hehedi Hasan

React JS :global() CSS - Complete Guide (Beginner to Advanced)

Md Hehedi Hasan — Fri, 10 Apr 2026 09:17:27 +0000

🧠 React CSS Modules `:global()` — The Right Way to Use Global Styles

If you're working with React and using CSS Modules, you've probably enjoyed the benefit of scoped styles—no more worrying about class name conflicts.

But then comes a common challenge:

👉 “How do I apply global styles like body, reset, or utility classes?”

That’s exactly where :global() comes in.

In this blog, we’ll break it down in a simple and practical way 👇

🚀 What is CSS Modules?

CSS Modules scope your CSS locally by default. That means every class you write is tied to a specific component.

/* styles.module.css */
.title {
  color: blue;
}

import styles from './styles.module.css';

export default function App() {
  return <h1 className={styles.title}>Hello World</h1>;
}

✅ No conflicts
✅ Clean structure
✅ Easier maintenance

🌍 So, What is `:global()`?

Sometimes, you need styles that apply across your entire app.

That’s where :global() helps.

:global(selector) {
  /* global styles */
}

👉 It tells CSS Modules:
“Hey, don’t scope this—make it global.”

🎯 Real Example: Styling the `body`

/* styles.module.css */

:global(body) {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

✔ This affects the entire application
✔ Works even inside a module file

🎨 Example: Creating a Global Utility Class

:global(.btn) {
  background: #ff4757;
  color: white;
  padding: 10px 16px;
  border: none;
  cursor: pointer;
}

<button className="btn">Click Me</button>

👉 Useful for reusable UI elements

⚖️ Local vs Global Styles

Feature	Local (Default)	Global (`:global`)
Scope	Component-only	Entire app
Safety	No conflicts	Risk of conflicts
Best for	UI components	Reset & utilities

🔀 Mixing Local and Global

You can use both together:

.card {
  padding: 20px;
  background: #f1f2f6;
}

:global(.text-center) {
  text-align: center;
}

👉 This keeps your component clean while still allowing shared utilities.

🧩 When Should You Use `:global()`?

✅ Use it for:

Global resets (body, html)
Third-party library overrides
Utility classes (e.g., .container, .text-center)

❌ Avoid when:

Styling specific components
Overusing global classes (can break structure)

🆚 Alternative: Global CSS File

Instead of using :global(), you can define a global stylesheet:

/* global.css */
body {
  margin: 0;
}

import './global.css';

👉 This is often cleaner for base styles.

💡 Pro Tips

Keep most styles local
Use :global() only when necessary
Combine with utility-first frameworks (like Tailwind) for better scalability

🏁 Final Thoughts

CSS Modules give you control and safety.
:global() gives you flexibility.

👉 The real power comes from knowing when to use each.

Use global styles carefully, and your React app will stay clean, scalable, and maintainable 🚀

How to add ANY prefix in React + Vite + Tailwind CSS

Md Hehedi Hasan — Fri, 05 Dec 2025 16:39:57 +0000

Here is a clean Markdown file you can save as
ADD_PREFIX_TAILWIND_V4.md
or anything you want.

📘 How to Add Any Prefix in React + Vite + Tailwind CSS v4

In Tailwind CSS v4, prefixes are no longer added using tailwind.config.js.
Instead, you add the prefix directly in your CSS @import rule.

✅ 1. Open Your Main CSS File

Examples:

src/index.css

or:

src/App.css

✅ 2. Import Tailwind With a Custom Prefix

You can use any prefix such as:

tw
my
ui
x
custom
anything you want

Example:

@import "tailwindcss" prefix(tw);

Or:

@import "tailwindcss" prefix(my);

Or:

@import "tailwindcss" prefix(custom);

✅ 3. Use Prefixed Classes in React

Example (prefix: `tw`):

<h1 className="tw-text-3xl tw-font-bold tw-text-red-500">
  Hello Tailwind
</h1>

Example (prefix: `my`):

<h1 className="my-text-xl my-font-semibold">
  Custom Prefix Working
</h1>

🎯 Variants (hover, responsive, dark mode)

Tailwind v4 uses this format:

prefix + variant + ":" + utility

✔ Correct:

tw-hover:text-red-500
tw-md:text-xl
tw-dark:bg-black

❌ Incorrect:

tw:hover:text-red-500
tw:text-red-500

✅ Example Button (prefix: `my`)

<button className="
  my-bg-blue-500
  my-text-white
  my-rounded
  my-hover:bg-blue-600
">
  Click Me
</button>

📌 Summary

Feature	Tailwind v4 Behavior
Add prefix	`@import "tailwindcss" prefix(tw);`
Any prefix allowed	Yes
Utility format	`tw-text-red-500`
Variants	`tw-hover:bg-black`
Wrong format	`tw:bg-black`