The answer
Use prefixes on grid-cols. For example, grid-cols-1 md:grid-cols-3 shows one column on mobile and three on larger screens, all in one className with no media queries.
Building Responsive React UIs With Tailwind CSS
How do I make a responsive grid in Tailwind?
More FAQs in Building Responsive React UIs With Tailwind CSS
Tailwind uses breakpoint prefixes like sm:, md:, lg:, and xl: to apply styles at different screen sizes. You write responsive styles inline in the className, without separate media query files.
Yes. A class without a prefix applies at all sizes. A prefixed class like md:flex applies at that breakpoint and up. So you write base mobile styles first, then add larger-screen styles with prefixes.
Use hidden md:block to hide on mobile and show on larger screens, or block md:hidden for the opposite. This is common for navigation toggles and elements that should only appear at certain sizes.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.