Tailwind CSS 4 and Bootstrap 5 styling reference — how A3 uses both frameworks together, utility classes, component styling, and responsive design patterns
A3 uses BOTH Tailwind CSS and Bootstrap:
Tailwind is loaded via @tailwindcss/vite plugin in vite.config.mjs. Entry point is app/styles/app.css.
flex, inline-flex, block, inline-block, grid, hidden
items-center, items-start, items-end
justify-center, justify-between, justify-start, justify-end
flex-col, flex-row, flex-wrap
gap-1 through gap-12
p-0 through p-12 (padding)
px-4, py-2 (horizontal/vertical padding)
m-0 through m-12 (margin)
mx-auto (center horizontally)
mt-3, mb-4 (specific side margin)
space-x-2, space-y-3 (child spacing)
text-sm, text-base, text-lg, text-xl, text-2xl
font-bold, font-semibold, font-medium, font-normal
text-gray-500, text-gray-700, text-gray-900
text-center, text-left, text-right
truncate, line-clamp-2
text-primary, bg-primary (Bootstrap's primary color)
text-muted, text-secondary
bg-white, bg-gray-50, bg-gray-100
border-gray-200, border-gray-300
border, border-0, border-t, border-b
rounded, rounded-md, rounded-lg, rounded-full
shadow-sm, shadow, shadow-md, shadow-lg
w-full, w-1/2, w-1/3, w-auto
h-full, h-screen, h-auto
max-w-md, max-w-lg, max-w-xl
min-h-screen