css Questions
1 months ago
Tailwind CSS: how to create a responsive sidebar that collapses on mobile?
I'm building a dashboard layout. On desktop I want a fixed left sidebar (250px), on mobile it should slide in/out as a drawer.
I've tried using hidden and flex breakpoint utilities but can't get the transition to work smoothly. Is there a standard Tailwind pattern for this?
P
Priya Nair
asked 1 months ago
2
Answers
23
Upvotes
3422
Views2 months ago
How to implement dark mode with Tailwind CSS and Next.js?
I want to add a dark mode toggle to my Next.js app using Tailwind's built-in dark mode support. I want to:
- Respect the user's OS preference by default
- Allow manual override with a toggle button
- Persist the preference in localStorage
- Avoid flash of unstyled content (FOUC)
What's the correct implementation? Should I use next-themes or roll my own?
5 months ago
CSS Grid vs Flexbox — when to use which?
I understand the basics of both Grid and Flexbox, but in practice I often find myself guessing which to use. My confusion:
- Grid is 2D, Flexbox is 1D — but I can fake 2D with Flexbox wrapping
- Grid seems more verbose for simple layouts
Can someone give me a clear decision framework with real examples?
6 months ago
CSS: how to center a div — the definitive 2024 guide?
Yes, I know this is a classic meme, but seriously — there are now 10 different ways to center a div and I don't know which is best in each context.
I want to understand: when to use margin: auto, Flexbox, Grid, position: absolute with transform, and the new place-items: center shorthand. What's the decision tree?