### Install and Run Local Site

Source: https://github.com/markmead/hyperui/blob/main/README.md

Commands to install dependencies, start the local development server, and watch for CSS component changes.

```bash
pnpm install
pnpm dev
pnpm run css:component --watch
```

--------------------------------

### Run the Site Locally

Source: https://github.com/markmead/hyperui/blob/main/CONTRIBUTING.md

Follow these commands to clone the repository, install dependencies, and start the local development server.

```bash
git clone git@github.com:markmead/hyperui.git
pnpm install
pnpm dev
pnpm run css:component --watch
```

--------------------------------

### Apply Animation Utilities

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/animation-duration-delay-with-tailwindcss.mdx

Example of applying custom animation duration, delay, and easing utilities along with a base animation like `animate-spin`.

```html
<div class="animate-duration-700 animate-delay-300 animate-ease-in-out animate-spin">...</div>
```

--------------------------------

### Development and Build Commands

Source: https://github.com/markmead/hyperui/blob/main/CLAUDE.md

Common commands for starting the development server, compiling CSS, building for production, running tests, linting, formatting, and generating git metadata.

```bash
pnpm dev                          # start dev server (also runs wrangler types first)
pnpm run css:component --watch    # compile component preview CSS (run alongside dev)
pnpm run css:blog                 # compile blog CSS (one-off)
pnpm build                        # production build
pnpm test                         # run Playwright E2E tests (requires dev server running)
pnpm lint                         # ESLint
pnpm format                       # Prettier
pnpm run generate:git-metadata    # regenerate src/data/git-metadata.json from git history
```

--------------------------------

### HTML Example Before Prefixing

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/move-to-tailwindcss-without-breaking-changes.mdx

Shows a typical HTML structure using utility classes that might conflict with another CSS framework before applying a Tailwind prefix.

```html
<div class="flex items-center gap-2">...</div>
```

--------------------------------

### HTML Example After Prefixing Tailwind

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/move-to-tailwindcss-without-breaking-changes.mdx

Illustrates the same HTML structure after applying a 'tw-' prefix to Tailwind CSS utility classes, preventing potential conflicts.

```html
<div class="tw-flex tw-items-center tw-gap-2">...</div>
```

--------------------------------

### Define Animation Delay Utility

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/animation-duration-delay-with-tailwindcss.mdx

Create custom Tailwind CSS classes for animation delay using the `@utility` directive. This example handles numeric suffixes for milliseconds and sets the `animation-delay` property.

```css
@utility animate-delay-* {
  --animate-delay: --value(integer)ms;
  --animate-delay: --value([time]);
  animation-delay: var(--animate-delay);
}
```

--------------------------------

### Define Animation Duration Utility

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/animation-duration-delay-with-tailwindcss.mdx

Use the `@utility` directive to create custom Tailwind CSS classes for animation duration. This example maps numeric suffixes to milliseconds and sets the `animation-duration` property.

```css
@utility animate-duration-* {
  --animate-duration: --value(integer)ms;
  --animate-duration: --value([time]);
  animation-duration: var(--animate-duration);
}
```

--------------------------------

### Pull Request Title Formats

Source: https://github.com/markmead/hyperui/blob/main/CONTRIBUTING.md

Use these formats for pull request titles to ensure clarity and consistency. The title should start with a type (Feature, Bugfix, Update, Epic) followed by a concise description.

```text
Feature - Add new card variants
```

```text
Bugfix - Resolve search input focus state
```

```text
Update - Improve footer component docs
```

```text
Epic - Refactor component preview architecture
```

--------------------------------

### Preview Blog Styles

Source: https://github.com/markmead/hyperui/blob/main/CONTRIBUTING.md

Execute this command to preview the blog styles for HyperUI.

```bash
pnpm run css:blog
```

--------------------------------

### Apply Animation Utilities with Arbitrary Values

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/animation-duration-delay-with-tailwindcss.mdx

Demonstrates using arbitrary values for animation delay and duration, combined with easing and a base animation.

```html
<div class="animate-delay-700 animate-duration-[1500ms] animate-ease-in-out animate-spin"></div>
```

--------------------------------

### Apply Animation Utilities with Arbitrary Properties

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/animation-duration-delay-with-tailwindcss.mdx

Shows how to use arbitrary CSS properties directly for animation duration, delay, and timing function for one-off cases.

```html
<div class="[animation-duration:5s] [animation-delay:0.25s] [animation-timing-function:cubic-bezier(.17,.67,.83,.67)] animate-spin"></div>
```

--------------------------------

### Declare Tailwind CSS Plugins in Component Object

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-contribute.mdx

When adding a new component, declare any official Tailwind CSS plugins used within the component object in the MDX file. Example shown for '@tailwindcss/forms'.

```javascript
plugins: ['@tailwindcss/forms']
```

--------------------------------

### Use Accurate Transition Class in HTML

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-tailwindcss.mdx

Specify `transition-colors` instead of `transition-all` when only color transitions are needed to potentially reduce class name length and be more explicit.

```html
<button class="bg-red-500 transition-all hover:bg-red-600">Click</button>
```

```html
<button class="bg-red-500 transition-colors hover:bg-red-600">Click</button>
```

--------------------------------

### Use Color Opacity Classes in HTML

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-tailwindcss.mdx

Apply color opacity directly using `bg-opacity-*` or the shorthand `bg-color/opacity` syntax for cleaner and more concise styling.

```html
<button class="relative">
  <span class="absolute inset-0 bg-red-500 opacity-50"></span>
  Click
</button>
```

```html
<button class="bg-opacity-50 bg-red-500">Click</button>
<!-- With JIT -->
<button class="bg-red-500/50">Click</button>
```

--------------------------------

### Open and Close Modal

Source: https://github.com/markmead/hyperui/blob/main/public/examples/application/modals/2.html

This snippet demonstrates how to open a modal using `showModal()` and close it using `close()`. It requires HTML elements with specific attributes for the open and close buttons.

```javascript
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')

openButtonEl.addEventListener('click', () => modalEl.showModal())

document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
  buttonEl.addEventListener('click', () => modalEl.close())
})
```

--------------------------------

### Be Specific with Breakpoint Classes

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-tailwindcss.mdx

Apply breakpoint prefixes directly to the classes they modify to avoid loading unnecessary CSS on smaller screens. This ensures optimal performance by only applying styles when needed.

```html
<div class="items-center justify-between sm:flex">
  <div>Hello</div>
  <div>World</div>
</div>
```

```html
<div class="sm:flex sm:items-center sm:justify-between">
  <div>Hello</div>
  <div>World</div>
</div>
```

--------------------------------

### Open HTML Modal

Source: https://github.com/markmead/hyperui/blob/main/public/examples/application/modals/5.html

Selects a dialog element and an open button, then adds an event listener to the button to display the modal when clicked.

```javascript
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
```

--------------------------------

### Evenly Space Content with Flow Root in HTML

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-tailwindcss.mdx

Use the `flow-root` utility combined with negative margin and padding on list items for consistent spacing, especially with dynamic content.

```html
<ul class="space-y-8 divide-y">
  <li>First</li>
  <li class="pt-8">Second</li>
  <li class="pt-8">Third</li>
</ul>
```

```html
<div class="flow-root">
  <ul class="-my-8 divide-y">
    <li class="py-8">First</li>
    <li class="py-8">Second</li>
    <li class="py-8">Third</li>
  </ul>
</div>
```

--------------------------------

### Define Animation Easing Utility

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/animation-duration-delay-with-tailwindcss.mdx

Implement custom Tailwind CSS classes for animation easing functions with the `@utility` directive. This supports predefined easing tokens and arbitrary cubic-bezier values.

```css
@utility animate-ease-* {
  --animate-easing: --value(--ease-*);
  --animate-easing: --value([*]);
  animation-timing-function: var(--animate-easing);
}
```

--------------------------------

### Base Hero Component Import

Source: https://github.com/markmead/hyperui/blob/main/src/content/collection/marketing/team-sections.mdx

Imports the BaseHero and BackLink Astro components for use in the page.

```astro
import BaseHero from '../../../components/BaseHero.astro'
import BackLink from '../../../components/BackLink.astro'
```

--------------------------------

### Alternative Tailwind CSS Prefix

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/move-to-tailwindcss-without-breaking-changes.mdx

Demonstrates using a different custom prefix for Tailwind CSS utilities. Choose any prefix that suits your project's naming conventions.

```css
@import 'tailwindcss' prefix(app);
```

--------------------------------

### Center Element with JavaScript

Source: https://github.com/markmead/hyperui/blob/main/public/examples/marketing/blog-cards/4.html

Use JavaScript to calculate and set the margin properties for centering an element. Ensure the element has a defined width and height.

```javascript
const element = document.getElementById('myElement');
const parent = element.parentElement;

const elementStyle = window.getComputedStyle(element);
const parentStyle = window.getComputedStyle(parent);

const elementWidth = parseFloat(elementStyle.width);
const elementHeight = parseFloat(elementStyle.height);
const parentWidth = parseFloat(parentStyle.width);
const parentHeight = parseFloat(parentStyle.height);

const marginLeft = (parentWidth - elementWidth) / 2;
const marginTop = (parentHeight - elementHeight) / 2;

element.style.marginLeft = marginLeft + 'px';
element.style.marginTop = marginTop + 'px';
```

--------------------------------

### Set Tailwind CSS Prefix

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/move-to-tailwindcss-without-breaking-changes.mdx

Import Tailwind CSS with a custom prefix to avoid class name collisions. This allows existing and new classes to coexist during migration.

```css
@import 'tailwindcss' prefix(tw);
```

--------------------------------

### Astro Base Hero with Back Link

Source: https://github.com/markmead/hyperui/blob/main/src/content/collection/application/side-menu.mdx

This snippet demonstrates how to integrate a BaseHero component with a BackLink in Astro. It's used for page headers, providing navigation back to a parent component category.

```astro
import BaseHero from '../../../components/BaseHero.astro'
import BackLink from '../../../components/BackLink.astro'

<BaseHero title={frontmatter.title} description={frontmatter.description}>
  <BackLink
    slot="back"
    href={`/components/${frontmatter.category}`}
    label={`Back to ${frontmatter.category} components`}
  />
</BaseHero>
```

--------------------------------

### Use Max-Width Classes for Responsive Width

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-tailwindcss.mdx

Use `max-width` classes instead of `width` classes to restrict element width responsively. This approach is more flexible and better describes layout intentions.

```html
<div class="w-auto sm:w-64">
  <div>Hello World</div>
</div>
```

```html
<div class="max-w-sm">
  <div>Hello World</div>
</div>
```

--------------------------------

### Avoid Creating Components in CSS Files

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-tailwindcss.mdx

Instead of defining component-like classes in CSS with `@apply`, apply Tailwind utility classes directly in your HTML templates for better maintainability.

```html
<div class="card">
  <div class="card-title">Title</div>
  <div class="card-body">Title</div>
  <div class="card-footer">
    <div class="card-timestamp">15/05/2025</div>

    <div class="card-actions">
      <button>Edit</button>
      <button>Delete</button>
    </div>
  </div>
</div>
```

```css
.card {
  @apply rounded-sm p-4;
}

.card-title {
  @apply text-lg;
}

.card-body {
  @apply mt-1;
}

.card-footer {
  @apply flex items-center justify-between;
}

.card-timestamp {
  @apply text-sm;
}

.card-actions {
  @apply flex gap-4;
}
```

```html
<div class="rounded-sm p-4">
  <div class="text-lg">Title</div>
  <div class="mt-1">Title</div>
  <div class="flex items-center justify-between">
    <div class="text-sm">15/05/2025</div>

    <div class="flex gap-4">
      <button>Edit</button>
      <button>Delete</button>
    </div>
  </div>
</div>
```

--------------------------------

### Delegate Classes to Parent Element in HTML

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-tailwindcss.mdx

Avoid repeating utility classes on multiple child elements. Instead, apply common classes like text size and font weight to the parent element.

```html
<ul>
  <li class="text-sm font-medium whitespace-nowrap">First</li>
  <li class="text-sm font-medium whitespace-nowrap">Second</li>
  <li class="text-sm font-medium whitespace-nowrap">Third</li>
</ul>
```

```html
<ul class="text-sm font-medium">
  <li class="whitespace-nowrap">First</li>
  <li class="whitespace-nowrap">Second</li>
  <li class="whitespace-nowrap">Third</li>
</ul>
```

--------------------------------

### Fluid Container in Tailwind CSS

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-containers-in-tailwindcss.mdx

Use this HTML structure for a fluid container that adapts smoothly across different screen sizes. It leverages `mx-auto` for centering and `max-w-7xl` with `px-4` for responsive padding.

```html
<div class="mx-auto max-w-7xl px-4">
  <!-- Content -->
</div>
```

--------------------------------

### Import Tailwind CSS Layers Explicitly

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/move-to-tailwindcss-without-breaking-changes.mdx

Import specific Tailwind CSS layers to manage Preflight inclusion during migration. This allows your existing framework's reset styles to remain active.

```css
@layer theme, base, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
/* @import 'tailwindcss/preflight.css' layer(base); */
@import 'tailwindcss/utilities.css' layer(utilities);
```

--------------------------------

### Split CSS Class Names onto Multiple Lines in CSS Files

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-tailwindcss.mdx

Improve readability of Tailwind classes within CSS files by splitting them onto separate lines using `@apply`, which are compiled efficiently.

```css
.button {
  @apply inline-flex items-center rounded-sm border px-5 py-3 text-sm transition hover:scale-105;
}
```

```css
.button {
  @apply inline-flex items-center;
  @apply px-5 py-3 text-sm;
  @apply rounded-sm border;
  @apply transition;
  @apply hover:scale-105;
}
```

--------------------------------

### Remove Flex Classes on Mobile in HTML

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-tailwindcss.mdx

Optimize for mobile-first design by removing unnecessary flex properties from the base element and applying them only for larger screens using responsive prefixes.

```html
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
  <div>Hello</div>
  <div>World</div>
</div>
```

```html
<div class="sm:flex sm:items-center sm:justify-between">
  <div>Hello</div>
  <div>World</div>
</div>
```

--------------------------------

### PR Title Format

Source: https://github.com/markmead/hyperui/blob/main/CLAUDE.md

Standard format for pull request titles, specifying the type of change and a brief description.

```bash
<Feature|Bugfix|Update|Epic> - Description in sentence case
```

--------------------------------

### Static Gradient Border with Tailwind CSS

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/animated-border-gradient-with-tailwindcss.mdx

Use this snippet to create a static gradient border effect on an element. The border is achieved by applying padding to create space between the outer gradient background and an inner solid background.

```html
<a href="#" class="block rounded-full bg-linear-to-r from-green-300 via-blue-600 to-red-300 p-1">
  <span class="block rounded-full bg-white px-10 py-4 text-lg font-medium"> Hello there 👋 </span>
</a>
```

--------------------------------

### Center Element with JavaScript

Source: https://github.com/markmead/hyperui/blob/main/public/examples/marketing/blog-cards/4-dark.html

Use this JavaScript code to center an element. It calculates the element's position and applies CSS styles.

```javascript
function centerElement(elementId) {
  const element = document.getElementById(elementId);
  const parent = element.parentElement;

  const elementWidth = element.offsetWidth;
  const elementHeight = element.offsetHeight;

  const parentWidth = parent.offsetWidth;
  const parentHeight = parent.offsetHeight;

  const top = (parentHeight - elementHeight) / 2;
  const left = (parentWidth - elementWidth) / 2;

  element.style.position = 'absolute';
  element.style.top = `${top}px`;
  element.style.left = `${left}px`;
}

// Example usage:
// centerElement('myElement');
```

--------------------------------

### Custom Container Utility in Tailwind CSS

Source: https://github.com/markmead/hyperui/blob/main/src/content/blog/how-to-write-better-containers-in-tailwindcss.mdx

Define a custom `@utility` in your CSS to achieve the same fluid container behavior. This approach centralizes the container logic into a reusable utility class.

```css
@utility container {
  @apply mx-auto px-4;
}
```