← Tailwind CSS & Bootstrap learning pathTailwind CSS & Bootstrap · Module 7 of 10
Responsive design and states
Use breakpoint and state prefixes in Tailwind.
📖 Key ideas
- Breakpoint prefixes: sm:, md:, lg:, xl:, 2xl: (mobile-first).
- Example: grid-cols-1 md:grid-cols-3.
- State variants: hover:, focus:, active:, disabled:.
- Dark mode: dark:bg-gray-900.
- Group/peer variants style children based on parents/siblings.
💡 Real-life example: Prefixes are conditions: "on medium screens and above, wear this outfit".
md:Applies from the md breakpoint up
hover:Applies on mouse hover
dark:Applies in dark mode
group-hover:Child style when parent hovered