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
Components & Real-World Patterns 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.
A card component usually uses 'shadow-lg' for depth, 'rounded-lg' for corners, padding for spacing, and a neutral background. Together they create clean, reusable blocks.
class='bg-white rounded-lg shadow-lg p-4'
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.
Using Flexbox utilities 'flex justify-between items-center' creates a responsive navbar with evenly spaced items on both sides.
class='flex justify-between items-center px-6 py-4 bg-gray-800 text-white'
A reusable card can be made using base classes for structure — like rounded-lg, shadow, and padding — combined with slot-based content. Tailwind’s utility classes let you mix typography, spacing, and background utilities quickly without needing a separate CSS file.
A simple button uses background color, text color, and border-radius utilities. The 'bg-blue-500 text-white rounded' combo is one of the most common in Tailwind projects.
class='bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
The 'fixed inset-0' combo positions the modal overlay across the full viewport. 'w-full h-full' ensures the overlay spans the entire width and height.
class='fixed inset-0 w-full h-full bg-black/50 flex items-center justify-center'
The 'rounded-full' class sets a full border radius, while 'object-cover' ensures the image fills its container without distortion — ideal for profile avatars.
class='w-20 h-20 rounded-full object-cover'
Tailwind’s grid utilities make multi-column layouts simple. 'grid grid-cols-3 gap-4' divides the container into three equal columns with spacing between them.
class='grid grid-cols-3 gap-4'
Badges or tags are usually small inline-block elements with soft colors and full rounding for pill shapes. Tailwind utilities make them quick to style.
class='inline-block px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800'
Tailwind’s responsive utilities let you change layout per breakpoint. 'flex flex-col md:flex-row' stacks items vertically on mobile and horizontally on desktops.
class='flex flex-col md:flex-row gap-4'
Combining 'flex items-center justify-center' centers content in both directions — perfect for modals, icons, or loaders.
class='flex items-center justify-center h-screen'
Tailwind provides various shadow depths. 'shadow-xl' gives more elevation, making elements pop visually on light backgrounds.
class='bg-white rounded-lg shadow-xl p-6'
Tailwind encourages consistency by using design tokens like colors, spacing, and typography directly in class names. Components built this way follow the same design language. You can reuse and combine utilities without worrying about global CSS conflicts.
You can combine state variants like hover:, focus:, and active: with utility classes. This allows color and depth changes for each button state. Example — hover:bg-blue-600 for hover and active:bg-blue-700 for press.
You can use grid or flex utilities with responsive prefixes. For instance, 'grid grid-cols-1 md:grid-cols-3 gap-6' stacks cards on small screens and aligns them side-by-side on larger ones. It ensures readability and balance on all devices.
All utilities use shared theme values from the Tailwind config file. When you update a color or font there, every component using those utilities automatically updates. This helps maintain a consistent look across an entire project.