OnlineCBT
CSS practice
Build one component carefully.
Compose components from small utility classes
Tailwind supplies utility classes that map to styling decisions such as spacing, color, layout and responsive variants. It still uses CSS concepts: you need to understand flex, grid, sizing and the cascade to debug the resulting interface.
Each class contributes a small rule. The card remains semantic HTML, and the button keeps native keyboard behavior. A visual utility does not replace an accessible name, correct element or working event handler.
Use the project's current installation path
Tailwind's setup differs by major version and build system. For the current Vite integration, the official documentation uses the Tailwind package plus its Vite plugin and a CSS import. Follow that version's instructions rather than mixing older configuration snippets into a newer project. Do not load a second framework copy into a project that already builds Tailwind.
Responsive and state variants
A class such as md:grid-cols-2 applies at the configured medium breakpoint. hover: and focus-visible: describe states. Keep the base design usable at narrow widths and preserve visible keyboard focus.
Source detection
Build tooling needs to detect the utility names used by your templates. Constructing a class by combining arbitrary runtime string fragments can leave the expected CSS absent from the output. Map states to complete known class strings or follow the version's documented source-registration mechanism.
Practice
- Recreate the card using ordinary CSS and explain each utility's purpose.
- Add a two-column layout only at a wider breakpoint.
- Inspect the generated CSS rather than assuming a class exists.
- Test focus, long text and dark-theme contrast.
Reference: official Tailwind Vite setup.
