# How Global Styling Is Managed in Open‑SEO: A Complete Guide to Tailwind CSS Integration

> Discover how Open-SEO manages global styling with Tailwind CSS. Learn about the single global stylesheet and build-time compilation for efficient CSS.

- Repository: [Every App/open-seo](https://github.com/every-app/open-seo)
- Tags: how-to-guide
- Published: 2026-08-16

---

**Open‑SEO uses a Tailwind CSS‑based approach with a single global stylesheet imported at the root layout, compiled at build time into one CSS bundle.**

Global styling in the `every-app/open-seo` repository follows a centralized, utility‑first pattern. The React UI relies on Tailwind CSS configured through Vite, with all visual consistency enforced by a single global CSS file loaded once at the application root.

## Tailwind CSS Integration via Vite Build Configuration

The styling pipeline begins in [`vite.config.ts`](https://github.com/every-app/open-seo/blob/main/vite.config.ts). This file configures Vite to process Tailwind through PostCSS, enabling every component throughout the application to use Tailwind utility classes without individual imports.

When Vite runs its build process, the Tailwind PostCSS plugin scans all source files for class names and generates the corresponding CSS. This happens at **build time**, not runtime, which eliminates CSS‑in‑JS overhead and reduces bundle size.

## The Global Stylesheet Entry Point

The root layout component [`src/client/layout/AppShell.tsx`](https://github.com/every-app/open-seo/blob/main/src/client/layout/AppShell.tsx) serves as the single entry point for global styles:

```tsx
import '../styles/global.css';          // ← pulls in Tailwind base & utilities

export default function AppShell({ children }: Props) {
  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      {/* UI components can now use Tailwind utilities directly */}
      {children}
    </div>
  );
}

```

By importing [`../styles/global.css`](https://github.com/every-app/open-seo/blob/main/../styles/global.css) at the top level, **all descendant components inherit the Tailwind foundation**. This prevents style duplication and ensures visual consistency across the entire application.

## Global CSS File Structure

The [`src/styles/global.css`](https://github.com/every-app/open-seo/blob/main/src/styles/global.css) file contains the three Tailwind directive layers plus optional custom rules:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Optional custom resets or global rules */
html, body, #root {
  height: 100%;
  margin: 0;
}

```

- **`@tailwind base`** — Inject Tailwind's Preflight CSS reset and default element styles
- **`@tailwind components`** — Include any registered component classes
- **`@tailwind utilities`** — Generate the full utility class set

Custom global rules after the directives apply additional resets or base styles specific to Open‑SEO's design requirements.

## Component‑Level Styling with Utility Classes

Individual components reference Tailwind classes directly in their JSX markup. No additional CSS imports are required:

```tsx
export default function Button({ children }: Props) {
  return (
    <button className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
      {children}
    </button>
  );
}

```

This utility‑first approach means **styling logic lives colocated with markup**, reducing context‑switching between files and eliminating naming conflicts from traditional CSS methodologies.

## Build‑Time CSS Compilation

Because Tailwind processes during the Vite build, all styling compiles into a **single CSS bundle** served alongside JavaScript. This architecture delivers several performance benefits:

- No runtime CSS generation overhead
- Elimination of unused styles through PurgeCSS integration
- Single network request for all application styles
- Consistent visual output regardless of component load order

## Key Files in the Styling Architecture

| File | Role |
|------|------|
| [`vite.config.ts`](https://github.com/every-app/open-seo/blob/main/vite.config.ts) | Configures Vite to run Tailwind via PostCSS |
| [`src/client/layout/AppShell.tsx`](https://github.com/every-app/open-seo/blob/main/src/client/layout/AppShell.tsx) | Imports the global stylesheet and provides top‑level layout |
| [`src/styles/global.css`](https://github.com/every-app/open-seo/blob/main/src/styles/global.css) | Holds Tailwind directives and custom global CSS |
| [`package.json`](https://github.com/every-app/open-seo/blob/main/package.json) | Lists `tailwindcss`, `postcss`, and related plugins |

## Summary

- **Global styling in Open‑SEO** centers on a single Tailwind CSS pipeline configured in [`vite.config.ts`](https://github.com/every-app/open-seo/blob/main/vite.config.ts)
- The [`AppShell.tsx`](https://github.com/every-app/open-seo/blob/main/AppShell.tsx) root layout imports [`global.css`](https://github.com/every-app/open-seo/blob/main/global.css) once, making utilities available everywhere
- Components use Tailwind classes directly without per‑file CSS imports
- Build‑time compilation produces a single optimized CSS bundle
- This pattern maintains visual consistency while keeping the codebase lightweight and maintainable

## Frequently Asked Questions

### Where is the global CSS file located in Open‑SEO?

The global stylesheet lives at [`src/styles/global.css`](https://github.com/every-app/open-seo/blob/main/src/styles/global.css). It is imported by [`src/client/layout/AppShell.tsx`](https://github.com/every-app/open-seo/blob/main/src/client/layout/AppShell.tsx), the root layout component that wraps all application pages.

### Does Open‑SEO use CSS‑in‑JS or traditional CSS files?

Open‑SEO uses **traditional CSS files processed by Tailwind**. The [`global.css`](https://github.com/every-app/open-seo/blob/main/global.css) file contains Tailwind directives and is compiled at build time. No CSS‑in‑JS library is required.

### How do I add custom global styles to Open‑SEO?

Add custom rules to [`src/styles/global.css`](https://github.com/every-app/open-seo/blob/main/src/styles/global.css) after the three `@tailwind` directives. These rules apply globally across all components since every route renders within [`AppShell.tsx`](https://github.com/every-app/open-seo/blob/main/AppShell.tsx).

### What build tool powers the Tailwind integration in Open‑SEO?

**Vite** handles the Tailwind integration through its PostCSS plugin pipeline, configured in [`vite.config.ts`](https://github.com/every-app/open-seo/blob/main/vite.config.ts). This processes all Tailwind classes during the build step rather than at runtime.