not tailwindcss

Rapidly build a clone of Tailwind's landing page with Code Hike.

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

hello.html

<figure class="rounded-xl bg-slate-800">
  <img class="w-24 h-24" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”

Sarah Dayan

Staff Engineer, Algolia

Modern features

Cutting-edge is our comfort zone.

Tailwind is unapologetically modern, and takes advantage of all the latest and greatest CSS features to make the developer experience as enjoyable as possible.

We've got first-class CSS grid support, composable transforms and gradients powered by CSS variables, support for modern state selectors like :focus-visible, and tons more.

hello.html

<div class="grid grid-flow-col grid-rows-2 grid-cols-3 gap-8">
  <div>
    <img src="/mountains-1.jpg" alt="" loading="lazy">
  </div>
  <div class="col-start-3">
    <img src="/mountains-2.jpg" alt="" loading="lazy">
  </div>
  <div>
    <img src="/mountains-3.jpg" alt="" loading="lazy">
  </div>
  <div>
    <img src="/mountains-4.jpg" alt="" loading="lazy">
  </div>
  <div class="row-start-1 col-start-2 col-span-2">
    <img src="/mountains-5.jpg" alt="" loading="lazy">
  </div>
</div>

State variants

Hover and focus states? We got ’em.

Want to style something on hover? Stick hover: at the beginning of the class you want to add. Works for focus, active, disabled, focus-within, focus-visible, and even fancy states we invented ourselves like group-hover.

Not into component frameworks?

Use Tailwind's @apply directive to extract repeated utility patterns into custom CSS classes just by copying and pasting the list of class names.

Weekly one-on-oneDate and timeThu Nov 15, 2020 10:00am - 11:00am EST
LocationKitchener, ON
DescriptionNo meeting description
AttendeesAndrew McDonald
Decline
Accept

styles.css

.btn {
  @apply text-base font-medium rounded-lg p-3;
}
.btn--primary {
  @apply bg-sky-500 text-white;
}
.btn--secondary {
  @apply bg-slate-100 text-slate-900;
}

index.html

<article>
  <dl>
    <div>
    <button class="btn btn--secondary">Decline</button>