Styling

Macuin Laravel uses a hybrid styling approach combining Tailwind CSS 4.0 with custom CSS variables and component styles.

Styling Stack

The project’s styling is built on:

Tailwind CSS 4.0: Utility-first CSS framework
Custom CSS Variables: Design system tokens
Component Styles: Pre-built UI components (McQueen theme)
Vite Integration: Fast compilation and HMR

CSS Architecture

All styles are defined in a single file:

resources/css/app.css

This file (resources/css/app.css:1-1800) includes:

Tailwind CSS imports and configuration
CSS custom properties (design tokens)
Component-specific styles
Responsive utilities

Tailwind Configuration

The CSS file integrates Tailwind CSS 4.0 with @import and @source directives:

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

Content Sources

Tailwind scans these locations for class names (resources/css/app.css:3-6):

Laravel pagination views
Compiled Blade templates
All Blade templates in resources/
All JavaScript files in resources/

Theme Configuration

Custom font family defined in resources/css/app.css:8-10:

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

Tailwind CSS 4.0 uses the new @theme directive for configuration instead of a separate tailwind.config.js file.

Design System

CSS Variables

The project defines a comprehensive design token system in resources/css/app.css:16-47:

:root {
    --color-primary: #DC2626;
    --color-primary-dark: #B91C1C;
    --color-primary-light: #EF4444;
    --color-success: #22C55E;
    --color-danger: #EF4444;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    /* ... gray scale continues through gray-900 */
    --color-white: #FFFFFF;
}

Color Palette

Token	Value	Usage
`--color-primary`	`#DC2626` (Red 600)	Primary brand color, CTAs
`--color-primary-dark`	`#B91C1C` (Red 700)	Hover states
`--color-success`	`#22C55E` (Green 500)	Success messages, stock indicators
`--color-danger`	`#EF4444` (Red 500)	Error states, out of stock

The primary color is automotive-themed red (#DC2626), reflecting the auto parts industry.

Component Styles

The CSS includes pre-built component styles following the “McQueen” design theme:

Major Components

Header & Navigation

Defined in resources/css/app.css:90-167:

.header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

Includes:

Sticky header with shadow
Logo styling
Navigation links
Cart badge with item count
User icon

Product Cards

Defined in resources/css/app.css:233-334:

.product-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
    transition: var(--transition);
}

.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

Features:

Product image placeholder
Category badge
Product name and price
Stock indicator
Add to cart button

Authentication Forms

Defined in resources/css/app.css:339-510:

.auth-card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-xl);
}

Includes:

Login and register forms
Input fields with icons
Focus states with primary color
Responsive form layouts

Order Management

Defined in resources/css/app.css:604-960:

Order list cards
Order detail pages
Status timeline with icons
Order items breakdown
Summary cards with shipping info

Shopping Cart

Defined in resources/css/app.css:964-1096:

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
}

Features:

Two-column layout
Quantity controls
Item removal
Sticky summary sidebar

Landing Page

Defined in resources/css/app.css:1166-1733:

Hero section with gradient background
Category cards grid
Featured products
Benefits section
Call-to-action banner
Footer with social links

Base Styles

Global resets and base styles (resources/css/app.css:50-85):

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-gray-50);
    color: var(--color-gray-800);
    line-height: 1.5;
    min-height: 100vh;
}

Responsive Design

Mobile-first responsive breakpoints:

@media (max-width: 768px) {
    .header-container {
        padding: 0 1rem;
    }
    
    .nav-link {
        display: none;
    }
    
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }
}

Defined in:

General: resources/css/app.css:515-540
Orders/Cart: resources/css/app.css:1101-1144
Landing: resources/css/app.css:1737-1799

The navigation links are hidden on mobile (max-width: 768px). Implement a hamburger menu for mobile navigation.

Asset Pipeline

Development

Vite compiles CSS with HMR:

npm run dev

Features:

Instant CSS updates without page reload
Source maps for debugging
Tailwind JIT compilation
CSS variable support

Production

Optimized build process:

npm run build

Optimizations:

Unused Tailwind classes purged
CSS minification
Vendor prefixes added automatically
File hashing for cache busting

Using Styles in Blade

Include the compiled CSS in your Blade templates:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <!-- Use component classes -->
    <div class="product-card">
        <div class="product-info">
            <span class="product-category">Engine Parts</span>
            <h3 class="product-name">Oil Filter</h3>
            <div class="product-footer">
                <span class="product-price">$24.99</span>
                <span class="product-stock available">In Stock</span>
            </div>
            <button class="btn-add-cart">Add to Cart</button>
        </div>
    </div>
</body>
</html>

Customizing Styles

Adding New Colors

Define new CSS variables in :root:

:root {
    --color-accent: #3B82F6;
    --color-accent-dark: #2563EB;
}

Creating Components

Follow the existing pattern:

.custom-component {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: var(--transition);
}

.custom-component:hover {
    box-shadow: var(--shadow-md);
}

Extending Tailwind

Add utility classes in the @theme block:

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    --color-brand: #DC2626;
    --spacing-xxl: 6rem;
}

Tailwind CSS 4.0 uses CSS variables directly in the @theme block instead of a JavaScript configuration file.

Best Practices

Use Design Tokens

Prefer CSS variables over hardcoded values:

/* Good */
color: var(--color-primary);
box-shadow: var(--shadow-lg);

/* Avoid */
color: #DC2626;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

Combine Tailwind + Custom CSS

Use Tailwind for layout, custom classes for complex components:

<div class="container mx-auto p-4">
    <div class="product-card">
        <!-- Component styles handle the details -->
    </div>
</div>

Maintain Consistency

Follow existing naming conventions:

BEM-like structure: .product-card, .product-info, .product-name
Descriptive state classes: .available, .completed, .pending
Utility classes: .btn-primary, .btn-secondary

Optimize for Performance

Let Vite purge unused Tailwind classes in production
Use @apply sparingly (prefer component classes)
Minimize custom CSS when Tailwind utilities suffice

Next Steps

Frontend Development

Learn about Vite configuration and JavaScript setup

Deployment

Build optimized assets for production

Architecture

Guides

Styling Stack

CSS Architecture

Tailwind Configuration

Content Sources

Theme Configuration

Design System

CSS Variables

Color Palette

Component Styles

Major Components

Base Styles

Responsive Design

Asset Pipeline

Development

Production

Using Styles in Blade

Customizing Styles

Adding New Colors

Creating Components

Extending Tailwind

Best Practices

Next Steps

Frontend Development

Deployment

Build docs developers (and LLMs) love

Architecture

Guides

​Styling Stack

​CSS Architecture

​Tailwind Configuration

​Content Sources

​Theme Configuration

​Design System

​CSS Variables

​Color Palette

​Component Styles

​Major Components

​Base Styles

​Responsive Design

​Asset Pipeline

​Development

​Production

​Using Styles in Blade

​Customizing Styles

​Adding New Colors

​Creating Components

​Extending Tailwind

​Best Practices

​Next Steps

Frontend Development

Deployment

Build docs developers (and LLMs) love

Styling Stack

CSS Architecture

Tailwind Configuration

Content Sources

Theme Configuration

Design System

CSS Variables

Color Palette

Component Styles

Major Components

Base Styles

Responsive Design

Asset Pipeline

Development

Production

Using Styles in Blade

Customizing Styles

Adding New Colors

Creating Components

Extending Tailwind

Best Practices

Next Steps