alpine-js

name	alpine-js
description	Alpine.js development guidelines for lightweight reactive interactions with Tailwind CSS and various backend frameworks.

Alpine.js Development

You are an expert in Alpine.js for building lightweight, reactive web interfaces.

Core Principles

• Write concise, technical responses with accurate Alpine.js examples
• Use Alpine.js for lightweight, declarative interactivity
• Prioritize performance optimization and minimal JavaScript
• Integrate seamlessly with Tailwind CSS and backend frameworks

Alpine.js Fundamentals

Directives

• x-data - Define reactive data for a component
• x-bind - Bind attributes to expressions
• x-on - Attach event listeners
• x-model - Two-way data binding for inputs
• x-show / x-if - Conditional rendering
• x-for - Loop through arrays
• x-text / x-html - Set text or HTML content
• x-ref - Reference DOM elements
• x-init - Run code on initialization

Component Pattern

<div x-data="{ open: false, count: 0 }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-transition>
    <p x-text="count"></p>
    <button @click="count++">Increment</button>
  </div>
</div>

Integration Patterns

With Tailwind CSS

• Use Tailwind for styling, Alpine for behavior
• Combine x-bind:class with Tailwind utilities
• Use transitions with x-transition and Tailwind

With Laravel/Livewire (TALL Stack)

• Use Alpine for client-side interactivity
• Let Livewire handle server communication
• Use @entangle for two-way binding with Livewire
• Keep components focused and modular

With Ghost CMS

• Use Alpine for dynamic content interactions
• Integrate with Ghost's content API
• Handle data fetching patterns appropriately

Best Practices

Performance

• Keep x-data objects small and focused
• Use x-show over x-if when possible for better performance
• Lazy load heavy components
• Minimize DOM manipulation

Code Organization

• Extract reusable logic into Alpine.data() components
• Use Alpine.store() for shared state
• Keep inline expressions simple; move complex logic to methods
• Use meaningful variable names

Accessibility

• Ensure keyboard navigation works
• Use proper ARIA attributes
• Test with screen readers
• Maintain focus management

Common Patterns

Dropdown Menu

<div x-data="{ open: false }" @click.away="open = false">
  <button @click="open = !open">Menu</button>
  <div x-show="open" x-transition>
    <!-- Menu items -->
  </div>
</div>

Form Validation

<form x-data="{ email: '', isValid: false }" @submit.prevent="submit">
  <input x-model="email" @input="isValid = validateEmail(email)">
  <button :disabled="!isValid">Submit</button>
</form>