Tailwind Fundamentals

Tailwind Fundamentals

Tailwind is a utility-first CSS framework. Every CSS property has corresponding utility classes â€" no custom CSS needed for most UI work.

Core Utilities

// Spacing
<div className="p-4 px-6 py-3 mt-8 mb-4 gap-4">
  {/* p=padding, m=margin, gap=gap */}
</div>

// Typography
<h1 className="text-3xl font-bold tracking-tight text-gray-900">
  JST Academy
</h1>
<p className="text-sm text-gray-600 leading-relaxed">
  PhD-level crash courses
</p>

// Colors and backgrounds
<div className="bg-amber-500 text-white">
<div className="bg-[#f59e0b] text-[#1a1a1a]">  {/* arbitrary */}

// Borders and radius
<div className="border border-gray-200 rounded-xl shadow-sm">
<button className="rounded-full border-2 border-black">

Flexbox and Grid

// Flex
<div className="flex items-center justify-between gap-4">
  <span>Left</span>
  <span>Right</span>
</div>

// Grid
<div className="grid grid-cols-3 gap-6">
  {courses.map(c => <CourseCard key={c.id} course={c} />)}
</div>

// Grid responsive
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

Width, Height, Display

<div className="w-full max-w-4xl mx-auto">
<div className="w-1/2 h-48">
<div className="min-h-screen flex flex-col">
<span className="hidden md:block">  {/* hide on mobile */}
<span className="block md:hidden">  {/* hide on desktop */}

Conditional Classes with cn()

import { cn } from '@/lib/utils'

function Badge({ level }: { level: string }) {
  return (
    <span className={cn(
      "px-2 py-1 text-xs font-medium rounded-full",
      level === 'Basic' && "bg-gray-100 text-gray-600",
      level === 'Masters' && "bg-blue-100 text-blue-700",
      level === 'PhD' && "bg-amber-100 text-amber-700",
    )}>
      {level}
    </span>
  )
}