CSS Modules + PostCSS

If you want “real CSS” without global collisions, **CSS Modules** are an excellent default.

Example: component-scoped CSS module

css

/* Button.module.css */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #2563eb;
  color: white;
  font-weight: 700;
}

.button:hover { background: #1d4ed8; }
.button:focus-visible { outline: 2px solid rgba(37,99,235,.45); outline-offset: 2px; }

tsx

import styles from "./Button.module.css";

export function Button({ children }: { children: React.ReactNode }) {
  return <button className={styles.button}>{children}</button>;
}