React + Vite + Firebase

tailwind.config.js

Files

40 files

tailwind.config.jsLines 73-92

Theme:

Section 1 of 8

Section 1/8 • Lines 73-92

Configures Tailwind CSS for the React + Vite SPA.

Source Files (TSX, CSS)
   ↓
PostCSS (processes Tailwind directives)
   ↓
Vite (bundles and optimizes)
   ↓
Browser (applies styles)

`Stage`	`Behavior`	File Size
Development	All utilities available	~3-5 MB
Production	Only used classes	~10-50 KB

### CSS Purging / Tree-Shaking

Tailwind automatically removes unused CSS in production:

Scans all files in content array for class names

Identifies used utilities (e.g., bg-blue-600)

Includes only those in final CSS

Drops everything else

Result: Tiny stylesheet

Tailwind uses mobile-first breakpoints:

sm: 640px and up

md: 768px and up

lg: 1024px and up

xl: 1280px and up

2xl: 1536px and up

Write mobile styles first, then add responsive variants:

<div className="text-sm md:text-base lg:text-lg">
  Responsive text
</div>

Uses system preference (prefers-color-scheme):

<div className="bg-white dark:bg-gray-800">
  Light mode white, dark mode gray
</div>

@type {import('tailwindcss').Config}

CONTENT PATHS

Tell Tailwind which files to scan for class names

GLOB PATTERNS:

./index.html: Root HTML file

./src/

↓ Next Section

Lines 105-105

DARK MODE STRATEGY 'media': Uses prefers-color-scheme (system preference) 'class': Manual toggle wi...

Loading Monaco Editor...

TypeScript support initializing...