Global Styles & Theming Overview

This guide gives you the essentials on how global styles and themes work in the Ultimate Cursor AI Boilerplate. We keep things simple, modern, and fully customizable.

🎯 Why `index.css` Exists

Our index.css file:

Sets up base styles (font, spacing, resets)
Defines design tokens (colors, radii, fonts) as CSS variables
Enables dark mode with one toggle
Supports custom animations (like marquees)
Powers all Tailwind utility classes

🔧 How It Works (Core Concepts)

1. Tailwind + Custom Layers

We start by importing the basics:

@import "tailwindcss";
@import "tw-animate-css"; /* optional animations */

2. CSS Variables (Design Tokens)

Global theme variables live under :root, like:

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.27 0 0);
  --primary: oklch(0.76 0.16 70);
  --radius: 6px;
  --font-sans: Inter, sans-serif;
  .
  .
}

Then they’re reused like:

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

    <Button classes="bg-primary">
    Click me
    <Button/>

3. Dark Mode = `.dark` Class

Dark theme overrides the same variables:

.dark {
  --background: oklch(0.2 0 0);
  --foreground: oklch(0.92 0 0);
  .
  .
  .
}

Just toggle the .dark class on <html> or <body>.

4. Custom Animations (Optional)

Extras like marquee animations:

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.marquee {
  animation: marquee 20s linear infinite;
}

💡 Want Your Own Theme?

Use TweakCN to generate your own Tailwind-compatible themes. Just copy the variables into :root and .dark blocks.

✅ Component Example

<div className="bg-background text-foreground p-6 rounded-lg shadow">
  This adapts to your global theme!
</div>

🧠 Final Notes

Use bg-*, text-*, shadow-*—they all reflect your theme
All design tokens live in index.css
Tailwind config is extended to reference them
Dark mode? Just toggle .dark

If you want to add or change your design system, start in index.css.

For more, check the Tailwind theming docs or try TweakCN to craft your palette.

Get Started

Backend Options

Database

Frontend

Auth

Email

Payment

API

Structure

AI

CMS

Storage

SEO

Theme

Resources

Global Styles & Theming Overview

🎯 Why `index.css` Exists

🔧 How It Works (Core Concepts)

1. Tailwind + Custom Layers

2. CSS Variables (Design Tokens)

3. Dark Mode = `.dark` Class

4. Custom Animations (Optional)

💡 Want Your Own Theme?

✅ Component Example

🧠 Final Notes

​🎯 Why index.css Exists

​🔧 How It Works (Core Concepts)

​1. Tailwind + Custom Layers

​2. CSS Variables (Design Tokens)

​3. Dark Mode = .dark Class

​4. Custom Animations (Optional)

​💡 Want Your Own Theme?

​✅ Component Example

​🧠 Final Notes

🎯 Why `index.css` Exists

🔧 How It Works (Core Concepts)

1. Tailwind + Custom Layers

2. CSS Variables (Design Tokens)

3. Dark Mode = `.dark` Class

4. Custom Animations (Optional)

💡 Want Your Own Theme?

✅ Component Example

🧠 Final Notes