Skip to main content

​
Overview

Aviv’s portfolio uses TailwindCSS v4 with the typography plugin for styling. The design system is built with utility-first CSS classes and custom component variants.

​
TailwindCSS Configuration

The Tailwind configuration is minimal and extends the default theme:
tailwind.config.mjs
import typography from "@tailwindcss/typography";

export default {
  plugins: [typography()],
};

​
Global Styles

The global CSS file imports TailwindCSS and references the config:
src/styles/global.css
@import "tailwindcss";
@config "../../tailwind.config.mjs";
TailwindCSS v4 uses CSS imports instead of PostCSS configuration, making setup simpler.

​
Color System

The portfolio uses a red-based color scheme as the primary brand color, with gray for neutrals.

​
Primary Colors

The main brand colors used throughout the site:
  • Red: red-50 through red-800
  • Gray: gray-50 through gray-900
  • Supporting colors: emerald, orange for badges

​
Color Usage Examples

<section class="bg-gradient-to-r from-red-500 to-red-700">
  <h1 class="text-white">Hero Title</h1>
  <p class="text-red-100">Subtitle text</p>
</section>

​
Customizing Colors

To change the primary color scheme from red to another color:
1

Update tailwind.config.mjs

Extend the Tailwind theme with custom colors:
tailwind.config.mjs
import typography from "@tailwindcss/typography";

export default {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          // ... add more shades
          900: '#1e3a8a',
        },
      },
    },
  },
  plugins: [typography()],
};
2

Find and replace color classes

Search for red- classes and replace with your new color:
# Find all instances
grep -r "red-" src/components src/pages

# Replace in files
# red-600 → primary-600
# red-500 → primary-500

​
Typography

The site uses the default Tailwind font stack with system fonts.

​
Font Families

font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

​
Font Weights

  • Regular: font-normal (400)
  • Semibold: font-semibold (600)
  • Bold: font-bold (700)
  • Black: font-black (900)

​
Text Sizes

Common text size patterns in the codebase: 
<h1 class="text-6xl md:text-8xl font-black">Page Title</h1>
<h2 class="text-4xl md:text-5xl font-black">Section Title</h2>
<h3 class="text-2xl font-bold">Card Title</h3>

​
Custom Font Configuration

To use a custom font like Inter or custom font family:
tailwind.config.mjs
import typography from "@tailwindcss/typography";

export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        display: ['Montserrat', 'ui-sans-serif', 'sans-serif'],
      },
    },
  },
  plugins: [typography()],
};
Then import the font in your base layout:
src/layouts/BaseLayout.astro
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet" />
</head>

​
Custom Utility Classes

While the portfolio primarily uses Tailwind’s built-in utilities, you can add custom utilities in global.css:
src/styles/global.css
@import "tailwindcss";
@config "../../tailwind.config.mjs";

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-gray-900 to-red-600 bg-clip-text text-transparent;
  }
  
  .card-hover {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl;
  }
}
Usage: 
<h2 class="text-gradient">Gradient Text</h2>
<div class="card-hover">Hover me</div>

​
Component Variants

Many components use variant systems for styling. Here’s how variants work:

​
Button Variants

src/components/ui/Button.astro
const variants = {
  primary: "bg-gradient-to-r from-red-600 to-red-700 text-white",
  secondary: "bg-white text-gray-700 hover:text-red-600",
  outline: "border-2 border-red-600 text-red-600 hover:bg-red-600",
  ghost: "text-gray-600 hover:text-red-600 hover:bg-red-50",
};

​
Badge Variants

src/components/ui/Badge.astro
const variants = {
  primary: "bg-red-100 text-red-800",
  secondary: "bg-gray-100 text-gray-800",
  success: "bg-emerald-100 text-emerald-800",
  warning: "bg-orange-100 text-orange-800",
  danger: "bg-red-100 text-red-800",
};
When modifying component variants, make sure to update all variant options to maintain consistency.

​
Responsive Design

The site uses Tailwind’s responsive modifiers:
  • Mobile-first: Base styles apply to mobile
  • Breakpoints: sm:, md:, lg:, xl:

​
Common Responsive Patterns

<!-- Mobile stacked, desktop grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
  <!-- Cards -->
</div>

<!-- Mobile hidden, desktop visible -->
<div class="hidden md:flex">
  <!-- Desktop menu -->
</div>

<!-- Responsive text sizes -->
<h1 class="text-4xl md:text-6xl lg:text-8xl">
  Responsive Heading
</h1>

​
Transitions and Animations

The portfolio uses smooth transitions for interactive elements: 
/* Duration */
transition-all duration-300  /* Most elements */
transition-colors duration-300  /* Color changes */
transition-transform duration-500  /* Image scaling */

/* Effects */
hover:scale-105  /* Button hover */
hover:-translate-y-1  /* Card lift */
hover:shadow-xl  /* Shadow expansion */

​
Custom Scroll Behavior

Smooth scrolling is enabled in the base layout:
src/layouts/BaseLayout.astro
<html lang="en" class="scroll-smooth">

​
Dark Mode Support

The portfolio currently doesn’t include dark mode, but you can add it:
1

Enable dark mode in Tailwind

tailwind.config.mjs
export default {
  darkMode: 'class', // or 'media'
  plugins: [typography()],
};
2

Add dark mode classes

<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
  <!-- Content -->
</body>
3

Add theme toggle

Create a theme switcher component to toggle the dark class on the <html> element.

​
Best Practices

  • Use Tailwind’s built-in utilities instead of custom CSS when possible
  • Follow the existing color scheme for consistency
  • Test responsive designs on multiple screen sizes
  • Use semantic color names (primary, secondary) for easier theme changes

​
Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us