Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
Tailwind CSS · Question Set
Responsive Design & Dark Mode interview questions for placements and exams.
Questions
15
Included in this set
Subject
Tailwind CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for Tailwind CSS.
In Tailwind’s default theme, 'lg:' begins at 1024px. It’s typically used for larger laptops and desktops.
class='text-base lg:text-xl'
For complete preparation, combine this set with full subject-wise practice for Tailwind CSS. You can also explore other subjects and sets from the links below.
The 'hidden' class hides an element, and combining it with breakpoints controls visibility. For example, 'sm:hidden lg:block' hides content on small screens but shows it on large ones.
class='sm:hidden lg:block'
Responsive prefixes like sm:, md:, lg:, xl: apply styles from a certain screen width upward. Tailwind compiles them into CSS media queries automatically. This makes it simple to design layouts that adapt seamlessly across devices.
Tailwind follows a mobile-first approach. All classes apply to mobile by default, and you can add breakpoint prefixes like 'md:' or 'lg:' to style larger screens progressively.
class='text-sm md:text-lg lg:text-xl'
The 'md:' prefix applies styles when the screen width is at least 768 pixels. Tailwind uses min-width breakpoints, meaning the style applies from that size and up.
class='bg-blue-300 md:bg-green-300'
Tailwind allows responsive styling by prefixing classes with breakpoints. For example, 'sm:p-2' applies at small screens, while 'lg:p-6' applies from 1024px and above.
class='p-1 sm:p-2 lg:p-6'
The 'container' class in Tailwind provides a responsive fixed width that adapts at different breakpoints. It’s ideal for wrapping main content areas.
class='container mx-auto px-4'
You can enable dark mode either based on user’s OS setting ('media') or manually using the 'class' strategy in Tailwind’s configuration file.
module.exports = { darkMode: 'class' }The 'dark:' prefix applies a class only when dark mode is active. It allows developers to easily create light and dark themes with the same structure.
class='bg-white dark:bg-gray-900'
The 'media' strategy uses the CSS media query '(prefers-color-scheme: dark)' to automatically switch themes based on system preferences.
The 'bg-cover' class ensures that the background image scales proportionally to completely cover the element, maintaining its aspect ratio.
class='bg-cover bg-center'
You can add new screen sizes inside the theme.screens section of tailwind.config.js. Each key defines a minimum width for the breakpoint. This helps tailor responsive behavior for unique device widths or design requirements.
The 'media' strategy relies on system preferences, switching automatically based on the OS theme. The 'class' strategy gives developers full control by toggling a 'dark' class on the root element manually. Most apps use 'class' for flexibility in theme toggles.
Tailwind provides ready-to-use responsive utilities, breakpoint-based prefixes, and dark mode control, all within HTML. This eliminates the need for writing custom media queries, speeding up adaptive design workflows.
Dark mode enhances accessibility and reduces eye strain, especially in low-light environments. Developers can use the 'dark:' prefix to style themes without duplicating components. It’s often implemented in dashboards, apps, and blog sites for user preference.