Styling Reference

Responsive Size Reference
Breakpoint sizes are based on browser width. Base styles are for mobile (<768px), `md` is for tablets/landscape (>=768px), and `lg` is for desktops (>=1024px).
UI ElementMobile (<768px)Tablet (>=768px)Desktop (>=1024px)File Location
Quiz Answer Buttonsh-32 w-32h-40 w-40h-48 w-48src/app/[lang]/book/[id]/page.tsx
Book Cover on Homeaspect-[2/3] w-fullaspect-[2/3] w-fullaspect-[2/3] w-fullsrc/app/[lang]/page.tsx
Navigation/Play Buttonsh-14 w-14h-16 w-16h-20 w-20src/app/[lang]/book/[id]/page.tsx
Font Size Reference
Reference for dynamic font sizes used in the application.
UI ElementMobile (<768px)Tablet (>=768px)Desktop (>=1024px)File Location
Book Title (on Cover)text-4xltext-5xltext-6xlsrc/app/[lang]/book/[id]/page.tsx
Slide Texttext-2xltext-2xltext-4xlsrc/app/[lang]/book/[id]/page.tsx
Quiz Questiontext-xltext-2xltext-3xlsrc/app/[lang]/book/[id]/page.tsx
Home Page Category Titletext-3xltext-3xltext-3xlsrc/app/[lang]/page.tsx
Home Page Book Titletext-basetext-basetext-basesrc/app/[lang]/page.tsx
Tailwind CSS Sizing Guide
Quick reference for Tailwind CSS sizing utility classes and their pixel values used in this app.
Utility ClassValue
h-8 / w-82rem (32px)
h-10 / w-102.5rem (40px)
h-12 / w-123rem (48px)
h-14 / w-143.5rem (56px)
h-16 / w-164rem (64px)
h-20 / w-205rem (80px)
h-24 / w-246rem (96px)
h-32 / w-328rem (128px)
h-40 / w-4010rem (160px)
h-48 / w-4812rem (192px)
Tailwind CSS Font Size Guide
Quick reference for Tailwind CSS font-size utility classes and their pixel values.
Utility ClassValue
text-xs0.75rem (12px)
text-sm0.875rem (14px)
text-base1rem (16px)
text-lg1.125rem (18px)
text-xl1.25rem (20px)
text-2xl1.5rem (24px)
text-3xl1.875rem (30px)
text-4xl2.25rem (36px)
text-5xl3rem (48px)
text-6xl3.75rem (60px)