Styling Guide with Tailwind CSS

Complete guide to styling Constellation with Tailwind CSS.

Tailwind CSS Overview

• Version: 3.x
• Config: tailwind.config.ts
• PostCSS: postcss.config.mjs

---

Basic Usage

Utility-First Approach

// ✅ GOOD - Use Tailwind utilities
<div className="p-4 bg-blue-500 text-white rounded-lg">
  Hello World
</div>

// ❌ BAD - Custom CSS
<div style={{ padding: '1rem', backgroundColor: 'blue' }}>
  Hello World
</div>

Common Utilities

// Layout
<div className="flex items-center justify-between">
  Content
</div>

// Spacing
<div className="p-4 m-2 gap-3">
  Content
</div>

// Colors
<div className="bg-blue-500 text-white border-red-200">
  Content
</div>

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

// Effects
<div className="shadow-lg rounded-lg hover:shadow-xl">
  Content
</div>

---

Responsive Design

Breakpoints

Breakpoint	Size	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

Mobile-First Example

<div className="
  w-full           // Full width on mobile
  md:w-1/2         // Half width on md+ screens
  lg:w-1/3         // 1/3 width on lg+ screens
  p-2 md:p-4 lg:p-6  // Adaptive padding
">
  Content
</div>

---

Spacing Scale

Space | Value
------|-------
0     | 0px
1     | 0.25rem (4px)
2     | 0.5rem (8px)
3     | 0.75rem (12px)
4     | 1rem (16px)
5     | 1.25rem (20px)
6     | 1.5rem (24px)
8     | 2rem (32px)
10    | 2.5rem (40px)
12    | 3rem (48px)
16    | 4rem (64px)
20    | 5rem (80px)

Usage

<div className="p-4 m-2 gap-3">
  {/* padding: 1rem, margin: 0.5rem, gap: 0.75rem */}
</div>

<div className="px-4 py-2">
  {/* padding-x: 1rem, padding-y: 0.5rem */}
</div>

<div className="ml-auto">
  {/* margin-left: auto (useful for layouts) */}
</div>

---

Color Palette

Basic Colors

// Gray scale (for text, borders, backgrounds)
className="text-gray-900 bg-gray-50 border-gray-200"

// Brand colors (Blue)
className="bg-blue-500 hover:bg-blue-600"

// States
className="text-green-600"  // Success
className="text-red-600"    // Error
className="text-yellow-500" // Warning
className="text-blue-600"   // Info

Dark Mode

// Enable dark mode in tailwind.config.ts
export default {
  darkMode: 'class',
};

// Usage
<div className="bg-white dark:bg-gray-900">
  <p className="text-gray-900 dark:text-white">Text</p>
</div>

---

Typography

Font Sizes

className="text-xs"     // 0.75rem
className="text-sm"     // 0.875rem
className="text-base"   // 1rem
className="text-lg"     // 1.125rem
className="text-xl"     // 1.25rem
className="text-2xl"    // 1.5rem
className="text-3xl"    // 1.875rem
className="text-4xl"    // 2.25rem

Font Weight

className="font-light"      // 300
className="font-normal"     // 400
className="font-medium"     // 500
className="font-semibold"   // 600
className="font-bold"       // 700

Line Height

className="leading-tight"    // 1.25
className="leading-snug"     // 1.375
className="leading-normal"   // 1.5
className="leading-relaxed"  // 1.625

Text Examples

<h1 className="text-3xl font-bold">Heading</h1>
<p className="text-base leading-relaxed text-gray-600">Paragraph</p>
<span className="text-sm font-semibold text-blue-600">Label</span>

---

Flexbox & Grid

Flexbox

// Container
<div className="flex items-center justify-between gap-4">
  {/* Flex layout, center items, space between */}
</div>

// Directions
className="flex"           // row (default)
className="flex-col"       // column
className="flex-row-reverse"
className="flex-col-reverse"

// Alignment
className="justify-start"
className="justify-center"
className="justify-between"
className="justify-around"
className="justify-evenly"

className="items-start"
className="items-center"
className="items-end"
className="items-stretch"

className="gap-4"         // gap between items

Grid

// Container
<div className="grid grid-cols-3 gap-4">
  {/* 3-column grid with 1rem gap */}
</div>

// Responsive grid
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"

// Grid items
className="col-span-2"    // Span 2 columns
className="row-span-2"    // Span 2 rows

---

Common Component Patterns

Card Component

<div className="bg-white rounded-lg shadow-md p-6">
  <h3 className="text-lg font-semibold mb-2">Title</h3>
  <p className="text-gray-600">Content</p>
</div>

Button

// Primary
<button className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
  Button
</button>

// Secondary
<button className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
  Button
</button>

// Disabled
<button className="px-4 py-2 bg-gray-300 text-gray-500 rounded-lg cursor-not-allowed">
  Button
</button>

Badge

// Success
<span className="inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
  Active
</span>

// Error
<span className="inline-block px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">
  Error
</span>

Form Input

<input
  type="text"
  placeholder="Enter text"
  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>

Modal/Overlay

<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
  <div className="bg-white rounded-lg p-6 max-w-md">
    {/* Modal content */}
  </div>
</div>

---

Advanced Features

Arbitrary Values

// When Tailwind utility doesn't exist
className="w-[500px]"
className="h-[calc(100vh-80px)]"
className="bg-[#1da1f2]"
className="top-[117px]"

Custom CSS with @apply

/* globals.css */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }
}

Usage:

<button className="btn-primary">Click me</button>
<div className="card">Card content</div>

Pseudo-classes

className="hover:bg-blue-600"     // On hover
className="focus:ring-2"           // On focus
className="active:scale-95"        // On active
className="disabled:opacity-50"    // When disabled
className="group-hover:text-white" // Group hover

// States with :
className="even:bg-gray-50"   // Even child
className="odd:bg-white"      // Odd child
className="first:rounded-t-lg" // First child
className="last:rounded-b-lg"  // Last child

---

Tailwind Configuration

Custom Colors

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f7ff',
          500: '#0066cc',
          900: '#001a4d',
        },
      },
    },
  },
};

Usage:

className="bg-brand-500 text-brand-900"

Custom Spacing

export default {
  theme: {
    extend: {
      spacing: {
        'xs': '0.25rem',
        'sm': '0.5rem',
      },
    },
  },
};

Custom Breakpoints

export default {
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
      },
    },
  },
};

---

Performance Tips

✅ Best Practices

• ✅ Use Tailwind utilities instead of custom CSS
• ✅ Keep class names in templates (not dynamically generated)
• ✅ Use responsive prefixes (md:, lg:, etc.)
• ✅ Extract repeated patterns with @apply
• ✅ Use purge to remove unused styles in production

❌ Anti-patterns

• ❌ Dynamically generating class names
• ❌ Using inline styles
• ❌ Creating custom CSS for common styles
• ❌ Using overly nested CSS selectors
• ❌ Not using responsive prefixes

Dynamic Classes (Safe Way)

// ✅ GOOD - Class names are static
const buttonClass = isActive 
  ? 'bg-blue-500' 
  : 'bg-gray-500';

<button className={buttonClass}>Button</button>

// ❌ BAD - Dynamic class name generation
className={`w-${width}`}  // Tailwind can't parse this

---

Theme Customization

// tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#0066cc',
        secondary: '#00cc66',
      },
      fontFamily: {
        sans: ['var(--font-sans)'],
        mono: ['var(--font-mono)'],
      },
    },
  },
  plugins: [],
}

export default config

---

Shadcn/ui Integration

Shadcn components use Tailwind. Customize by modifying component files:

// Modify button styles in components/ui/Button.tsx
const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive: 'bg-destructive text-destructive-foreground',
      },
    },
  }
)

---

Debugging Tailwind

Inspect Classes

Use browser dev tools to see applied Tailwind classes:

# Open browser DevTools → Inspect element
# Look at computed styles to see Tailwind classes

Missing Styles

If styles aren't applying:

1. Check class name spelling
2. Verify class exists in Tailwind
3. Check content paths in tailwind.config.ts
4. Rebuild CSS: restart dev server

---

Related Documentation

• 🎨 STYLING.md - Advanced styling
• 📚 COMPONENTS.md - Component examples
• 📐 TAILWIND_GUIDE.md - Extended reference

---

Last Updated: January 2026