Skip to main content

​
Tailwind CSS Configuration

Music Store uses Tailwind CSS v4 for styling. The configuration is minimal, relying on Tailwind’s default design system.

​
Configuration File

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Tailwind v4 uses a simplified import system with @import "tailwindcss" instead of the traditional @tailwind directives.

​
Design System

​
Color Palette

Music Store uses a dark theme with glass-morphism effects: 
bg-[#0e0e0e]      # Primary dark background
bg-white/5        # Subtle glass effect
bg-white/10       # Glass effect
bg-black/60       # Overlay

​
Typography

The project uses custom fonts loaded via Google Fonts: 
// Font family usage
style={{
  fontFamily: "'Bebas Neue', sans-serif",
  letterSpacing: "0.02em"
}}

​
Spacing

Standard Tailwind spacing scale: 
className="p-4 md:p-6 gap-3 md:gap-6"

​
Glass-morphism Effects

One of Music Store’s signature design patterns is glass-morphism, used extensively in the navigation and UI elements. 
<nav className="
  flex gap-3 md:gap-6 
  text-white 
  bg-white/10 
  backdrop-blur-lg 
  border border-white/20 
  rounded-xl 
  px-4 md:px-6 py-3 
  shadow-lg
">
  {/* Navigation items */}
</nav>
Key classes for glass-morphism:
  • bg-white/10 - Semi-transparent background
  • backdrop-blur-lg - Blur effect
  • border border-white/20 - Subtle border
  • shadow-lg - Depth

​
Glass Card Pattern

<div className="
  bg-white/5 
  backdrop-blur-sm 
  rounded-2xl 
  p-4 
  border border-white/10
">
  {/* Card content */}
</div>

​
Responsive Design

Music Store uses Tailwind’s responsive modifiers for mobile-first design:

​
Breakpoint Pattern

// Mobile first, then tablet/desktop
className="
  w-[90vw] md:w-auto
  text-sm md:text-base
  px-4 md:px-6
  gap-3 md:gap-6
"

​
Grid Layouts

<div className="grid grid-cols-1 md:grid-cols-[260px_1fr] gap-8">
  <aside>{/* Sidebar */}</aside>
  <main>{/* Content */}</main>
</div>

​
Component Styling Examples

​
Hero Section

<section className="relative h-screen flex text-white">
  <div className="absolute inset-0 -z-10">
    {/* Background effect */}
  </div>
  
  <div className="absolute bottom-36 md:bottom-12 left-6 md:left-10">
    <h1 
      className="font-bold leading-none"
      style={{
        fontSize: "clamp(3.5rem, 10vw, 11rem)",
        fontFamily: "'Bebas Neue', sans-serif",
        letterSpacing: "0.02em"
      }}
    >
      Music<br />Store
    </h1>
  </div>
</section>

​
Product Card

<Link
  to={`/producto/${prod.id}`}
  className="
    bg-white/5 
    backdrop-blur-sm 
    rounded-2xl 
    p-4 
    text-center 
    border border-white/10 
    transition-all duration-300 
    hover:-translate-y-1 
    hover:bg-white/10 
    hover:border-white/30 
    hover:shadow-[0_10px_30px_rgba(255,255,255,0.05)]
  "
>
  <img 
    src={prod.imagen} 
    alt={prod.nombre} 
    className="w-full h-[200px] object-contain mb-4" 
  />
  <h3 className="text-base font-medium mb-2">{prod.nombre}</h3>
  <p className="text-white/60 text-sm font-semibold">
    ${prod.precio.toLocaleString()}
  </p>
</Link>

​
Interactive Elements

// Button with glass effect and hover state
<button className="
  px-4 py-2 md:px-6 md:py-3 
  text-white 
  bg-white/10 
  backdrop-blur-lg 
  border border-white/20 
  rounded-xl 
  shadow-lg 
  hover:bg-white/20 
  transition-all duration-300
">
  Mirar Tienda
</button>

// Badge indicator
<span className="
  absolute -top-2 -right-4 
  bg-white text-black 
  text-xs 
  rounded-full 
  w-4 h-4 
  flex items-center justify-center 
  font-bold
">
  {count}
</span>

​
Utility Patterns

​
Positioning

// Centering with absolute positioning
className="fixed left-1/2 -translate-x-1/2"

// Full screen overlay
className="fixed inset-0"

// Sticky sidebar
className="sticky top-8"

​
Transitions

// Smooth transitions
className="transition-all duration-300"
className="transition-opacity duration-200"
className="transition-colors duration-300"

​
Custom Shadows

// Glass shadow on hover
className="hover:shadow-[0_10px_30px_rgba(255,255,255,0.05)]"
className="hover:shadow-[0_10px_30px_rgba(255,255,255,0.15)]"

​
CSS Filters

For advanced styling, inline styles with CSS filters are used: 
<img
  src={brand.logo}
  alt={brand.name}
  style={{ filter: "brightness(0) invert(1)" }}
/>

​
Best Practices

Use Tailwind Classes

Prefer Tailwind utility classes over custom CSS for consistency

Mobile First

Start with mobile styles, then add md: and lg: modifiers

Opacity for Colors

Use opacity modifiers (/10, /20) for glass effects

Consistent Spacing

Use Tailwind’s spacing scale for uniformity
Pro Tips:
  • Use backdrop-blur-lg or backdrop-blur-sm for glass effects
  • Combine bg-white/10 with border-white/20 for depth
  • Add transition-all duration-300 for smooth interactions
  • Use clamp() for responsive typography

​
Dark Theme

The entire app uses a dark theme by default: 
// Base dark background
<div className="bg-[#0e0e0e] text-white min-h-screen">
  {/* Content */}
</div>
All components are designed with white text and semi-transparent white elements on dark backgrounds.

Build docs developers (and LLMs) love

Get started for freeTalk to us