Skip to Content
Browse all templates at capricorn.build →
Next.jsCustomizationStyling & Theming

Styling & Theming

Customize the look and feel of your template with colors, fonts, and layouts.

Quick Start

The fastest way to customize your template’s appearance:

/* app/globals.css */
:root {
    --background: #ffffff;
    --foreground: #171717;
}
 
@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
    }
}

Change these values and see instant results!

Understanding the Styling System

Your template uses two main styling approaches:

1. CSS Variables (Global Styles)

Located in app/globals.css:

:root {
    --background: #ffffff;
    --foreground: #171717;
    --primary: #0070f3;
    --secondary: #7928ca;
}

Use for: Site-wide colors, spacing, and design tokens

2. Tailwind CSS (Component Styles)

Used throughout components:

<div className="bg-white text-gray-900 p-4 rounded-lg">
  Content
</div>

Use for: Component-specific styling and layouts

Customizing Colors

Edit app/globals.css:

:root {
    /* Background colors */
    --background: #ffffff;
    --foreground: #171717;
 
    /* Brand colors */
    --primary: #0070f3;      /* Your main brand color */
    --secondary: #7928ca;    /* Accent color */
    --accent: #ff0080;       /* Highlight color */
 
    /* Functional colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
}
 
/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
        --primary: #0ea5e9;
        --secondary: #a855f7;
    }
}

Method 2: Tailwind Config

Edit tailwind.config.ts:

import type { Config } from "tailwindcss";
 
const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          primary: "#0070f3",
          secondary: "#7928ca",
          accent: "#ff0080",
        },
      },
    },
  },
  plugins: [],
};
 
export default config;

Then use in components:

<button className="bg-brand-primary text-white">
  Click Me
</button>

Finding Your Brand Colors

Use these tools to choose colors:

Pro Tip: Pick one primary color and use tools to generate complementary colors.

Customizing Typography

Method 1: Google Fonts

Edit app/layout.tsx:

import { Inter, Roboto } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})
 
const roboto = Roboto({
  weight: ['400', '700'],
  subsets: ['latin'],
  variable: '--font-roboto',
})
 
export default function RootLayout({ children }) {
  return (
    <html className={`${inter.variable} ${roboto.variable}`}>
      <body>{children}</body>
    </html>
  )
}

Update globals.css:

body {
    font-family: var(--font-inter), Arial, sans-serif;
}
 
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-roboto), sans-serif;
}

Method 2: Local Fonts

Place font files in public/fonts/ and add to globals.css:

@font-face {
    font-family: 'YourFont';
    src: url('/fonts/your-font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
 
body {
    font-family: 'YourFont', Arial, sans-serif;
}

Typography Scale

Customize font sizes in tailwind.config.ts:

export default {
  theme: {
    extend: {
      fontSize: {
        'xs': '0.75rem',
        'sm': '0.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
    },
  },
};

Customizing Spacing

Global Spacing

Edit tailwind.config.ts:

export default {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
};

Container Sizes

export default {
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
  },
};

Customizing Layouts

Header/Navigation

Edit components/Header.tsx (or wherever your header is):

export default function Header() {
  return (
    <header className="bg-white border-b">
      <div className="container mx-auto px-4">
        <nav className="flex items-center justify-between h-16">
          {/* Your navigation */}
        </nav>
      </div>
    </header>
  )
}

Page Layouts

Edit app/layout.tsx:

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Header />
        <main className="min-h-screen container mx-auto px-4 py-8">
          {children}
        </main>
        <Footer />
      </body>
    </html>
  )
}

Grid Layouts

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {items.map(item => (
    <Card key={item.id} {...item} />
  ))}
</div>

Responsive Design

Breakpoints

Tailwind’s default breakpoints:

sm: '640px'   // Small devices
md: '768px'   // Medium devices
lg: '1024px'  // Large devices
xl: '1280px'  // Extra large devices
2xl: '1536px' // 2X large devices

Usage:

<div className="text-sm md:text-base lg:text-lg">
  Responsive text size
</div>
 
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  Responsive grid
</div>

Custom Breakpoints

Edit tailwind.config.ts:

export default {
  theme: {
    screens: {
      'xs': '475px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px',
    },
  },
};

Dark Mode

Enable Dark Mode

Your template includes basic dark mode support. Customize it:

/* app/globals.css */
 
/* Light mode (default) */
:root {
    --background: #ffffff;
    --foreground: #171717;
}
 
/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
    }
}

Manual Dark Mode Toggle

Add a dark mode toggle:

'use client'
 
import { useEffect, useState } from 'react'
 
export default function DarkModeToggle() {
  const [darkMode, setDarkMode] = useState(false)
 
  useEffect(() => {
    const isDark = localStorage.getItem('darkMode') === 'true'
    setDarkMode(isDark)
    if (isDark) {
      document.documentElement.classList.add('dark')
    }
  }, [])
 
  const toggleDarkMode = () => {
    const newMode = !darkMode
    setDarkMode(newMode)
    localStorage.setItem('darkMode', String(newMode))
    document.documentElement.classList.toggle('dark')
  }
 
  return (
    <button onClick={toggleDarkMode}>
      {darkMode ? '☀️' : '🌙'}
    </button>
  )
}

Update tailwind.config.ts:

export default {
  darkMode: 'class', // Enable class-based dark mode
  // ... rest of config
};

Component Styling

Button Styles

Create reusable button variants:

// components/ui/Button.tsx
import { cn } from '@/lib/utils'
 
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
}
 
export default function Button({
  variant = 'primary',
  size = 'md',
  className,
  children,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        'rounded-lg font-medium transition-colors',
        {
          'bg-blue-600 text-white hover:bg-blue-700': variant === 'primary',
          'bg-gray-200 text-gray-900 hover:bg-gray-300': variant === 'secondary',
          'border-2 border-blue-600 text-blue-600 hover:bg-blue-50': variant === 'outline',
        },
        {
          'px-3 py-1.5 text-sm': size === 'sm',
          'px-4 py-2 text-base': size === 'md',
          'px-6 py-3 text-lg': size === 'lg',
        },
        className
      )}
      {...props}
    >
      {children}
    </button>
  )
}

Card Styles

// components/ui/Card.tsx
export default function Card({ children, className = '' }) {
  return (
    <div className={`bg-white rounded-lg shadow-md p-6 ${className}`}>
      {children}
    </div>
  )
}

Animations

Tailwind Animations

<div className="transition-all duration-300 hover:scale-105">
  Hover to scale
</div>
 
<div className="animate-pulse">
  Pulsing effect
</div>
 
<div className="animate-bounce">
  Bouncing effect
</div>

Custom Animations

Add to tailwind.config.ts:

export default {
  theme: {
    extend: {
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideIn: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' },
        },
      },
      animation: {
        fadeIn: 'fadeIn 0.5s ease-in',
        slideIn: 'slideIn 0.3s ease-out',
      },
    },
  },
};

Use in components:

<div className="animate-fadeIn">
  Fades in on load
</div>

Shadows & Effects

Box Shadows

<div className="shadow-sm">Small shadow</div>
<div className="shadow-md">Medium shadow</div>
<div className="shadow-lg">Large shadow</div>
<div className="shadow-xl">Extra large shadow</div>

Custom Shadows

// tailwind.config.ts
export default {
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
      },
    },
  },
};

Blur Effects

<div className="backdrop-blur-sm bg-white/30">
  Frosted glass effect
</div>

Best Practices

1. Use CSS Variables for Brand Colors

/* Good */
:root {
    --brand-primary: #0070f3;
}
.button { background: var(--brand-primary); }
 
/* Avoid */
.button { background: #0070f3; }

2. Mobile-First Responsive Design

/* Good */
<div className="text-sm md:text-base lg:text-lg">
 
/* Avoid */
<div className="lg:text-lg md:text-base text-sm">

3. Consistent Spacing

Use Tailwind’s spacing scale consistently:

/* Good - Uses 4px scale */
<div className="p-4 mb-6 gap-2">
 
/* Avoid - Random values */
<div className="p-[17px] mb-[23px] gap-[9px]">

4. Reusable Components

Create styled components instead of repeating classes:

/* Good */
<Button variant="primary">Click</Button>
 
/* Avoid */
<button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
  Click
</button>

Common Styling Tasks

Center Content

/* Horizontal */
<div className="flex justify-center">
 
/* Vertical */
<div className="flex items-center">
 
/* Both */
<div className="flex items-center justify-center">
 
/* Full screen */
<div className="min-h-screen flex items-center justify-center">

Full Width Background

<section className="w-full bg-gray-100 py-12">
  <div className="container mx-auto px-4">
    {/* Content */}
  </div>
</section>
<header className="sticky top-0 z-50 bg-white shadow-md">
  {/* Navigation */}
</header>

Troubleshooting

Styles Not Applying

  1. Check Tailwind config paths:
content: [
  './app/**/*.{js,ts,jsx,tsx,mdx}',
  './components/**/*.{js,ts,jsx,tsx,mdx}',
]
  1. Restart dev server:
npm run dev
  1. Clear .next cache:
rm -rf .next
npm run dev

Custom CSS Not Working

Make sure globals.css is imported in app/layout.tsx:

import './globals.css'

Dark Mode Issues

Check if you’ve enabled dark mode in tailwind.config.ts:

darkMode: 'class', // or 'media'

Resources

Next Steps

Need help with styling? Email: support@capricorn.engineering

Last updated on
OverviewUpdating Content