Alap v3 — Tailwind CSS

Page layout uses Tailwind utilities. Alap menus are styled via CSS targeting Alap's generated classes. In a real project with Tailwind's build step, use @apply to pull from your theme. Framework adapters also accept menuClassName for direct utility classes on the menu container.

Default Menu

My favorite cars — base styles using Tailwind color values.

/* With Tailwind @apply (requires build step): */
.alapelem {
  @apply bg-white border border-gray-200 rounded-lg shadow-lg min-w-[200px];
}
.alapelem a:hover {
  @apply bg-blue-50 text-blue-600;
}

/* Without @apply (CDN / plain CSS): */
.alapelem {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

Green Accent (Bridges)

Famous bridges — green tint with bigger top offset.

/* @apply version: */
.alap_bridges {
  @apply mt-4 bg-green-50 border-green-300;
}
.alap_bridges a:hover {
  @apply bg-green-100 text-green-800;
}

/* Plain CSS: */
.alap_bridges {
  margin-top: 1rem;
  background: #f0fdf4;
  border-color: #86efac;
}

Warm Tones + Left Offset (Coffee)

Find some coffee — amber palette, shifted right with margin-left: 2rem.

/* @apply version: */
.alap_coffee {
  @apply ml-8 bg-amber-50 border-amber-300;
}
.alap_coffee a:hover {
  @apply bg-amber-100 text-amber-900;
}

/* Plain CSS: */
.alap_coffee {
  margin-left: 2rem;
  background: #fffbeb;
  border-color: #fcd34d;
}

Dark Theme (NYC)

Explore NYC spots — slate background, light text.

/* @apply version: */
.alap_nycspots {
  @apply bg-slate-800 border-slate-700 shadow-xl;
}
.alap_nycspots a {
  @apply text-slate-200;
}
.alap_nycspots a:hover {
  @apply bg-slate-700 text-blue-400;
}

/* Plain CSS: */
.alap_nycspots {
  background: #1e293b;
  border-color: #334155;
}

Pill Style (SF)

Check out SF spots — rounded pill shape with indigo accent.

/* @apply version: */
.alap_sfspots {
  @apply rounded-2xl border-2 border-indigo-200 bg-indigo-50;
}
.alap_sfspots li:first-child a { @apply rounded-t-2xl; }
.alap_sfspots li:last-child a  { @apply rounded-b-2xl; }

/* Plain CSS: */
.alap_sfspots {
  border-radius: 1rem;
  border: 2px solid #c7d2fe;
  background: #eef2ff;
}

The Pattern

/* Alap generates the menu markup — you style it via CSS.
   With Tailwind's build step, @apply bridges the gap: */

/* 1. Base — all menus */
.alapelem { @apply bg-white border rounded-lg shadow-lg; }

/* 2. Per-anchor — menu gets alap_{anchorId} */
.alap_bridges { @apply bg-green-50 border-green-300; }

/* 3. Per-item — li gets cssClass from config */
.highlight { @apply font-semibold; }

/* Framework adapters also accept menuClassName: */
<AlapLink menuClassName="my-tw-classes" ... />