Foundations
Spacing and control sizing
Treat recurring Tailwind measurements as observed conventions, not a published spacing-token package.
On this page
Observed measures
| Element | Source | Application |
|---|---|---|
| Main panels | p-4 / md:p-8; rounded-2xl | SidebarLayout and creator composition |
| Field padding | pl-4 or pl-12 with icon; pr-4; py-3 | FormField; account for icons without reducing text width |
| Section rhythm | mt-12 / pt-12 and mb-6 / mb-8 | Learning sections and content tabs |
| Checklist control | w-9 h-9 with mr-4 | 36px visual target; verify practical touch area |
| Toggle | w-11 h-6, knob w-4 h-4 | Keep the label and disabled treatment attached |
| Resource action | h-[50px]; icon region w-[60px] | Links/download pills |
| Save action | px-8 py-3, mt-6 | Separate commit control from editable fields |
Rules for composition
Use spacing to group an action with its explanation. In a lesson, keep the checklist heading with its actions; in an editor, keep validation feedback with its field. A screenshot board’s padding is only framing, not a product spacing token.
Prefer source wrappers and breakpoint rules before introducing a new fixed width. Phone screens need enough room for the input and persistent labels, with horizontal scrolling confined to deliberate content regions.
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1