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
Backgrounds, Borders & Shadows 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.
Tailwind uses the 'bg-' prefix for background colors. For example, 'bg-blue-500' applies a mid-tone blue color from the palette. You can use shades 50 to 900 to adjust brightness.
class='bg-blue-500 text-white'
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.
Ring utilities create an outline outside the element’s border, often used for focus states. For example, 'ring-2 ring-blue-500' highlights form inputs when active.
class='focus:ring-2 focus:ring-blue-500'
Gradients in Tailwind are built using 'from-', 'via-', and 'to-' utilities. You can define custom colors or extend the palette in the configuration file. This allows you to build creative gradients that match your brand identity or theme.
The 'bg-gradient-to-r' class creates a gradient background that flows from left to right. Combine it with 'from-' and 'to-' color utilities to control the gradient direction and colors.
class='bg-gradient-to-r from-blue-400 to-green-500'
The 'bg-gradient-to-b' class creates a gradient that moves vertically from top to bottom. You can pair it with 'from-' and 'to-' colors for smooth transitions.
class='bg-gradient-to-b from-purple-400 to-indigo-700'
The 'bg-no-repeat' class sets background-repeat to none. It’s commonly used with custom background images to prevent tile repetition.
class='bg-no-repeat bg-cover bg-center'
The 'border-red-500' utility applies a red color from the Tailwind palette to the element’s border. It can be combined with 'border' or 'border-2' for visibility.
class='border border-red-500 rounded-lg'
Tailwind’s border utilities define border thickness. 'border-2' applies a consistent 2-pixel border to all sides. You can also target specific sides like border-t or border-b.
class='border-2 border-gray-400'
The 'rounded-full' class gives an element maximum border-radius, making it completely circular when width and height are equal. It’s commonly used for avatars or buttons.
class='w-16 h-16 rounded-full bg-blue-500'
Tailwind includes predefined shadow utilities like shadow-sm, shadow-md, and shadow-xl. 'shadow-md' provides a balanced depth for cards and containers.
class='bg-white p-6 shadow-md rounded-lg'
Tailwind’s rounding scale ranges from rounded-none to rounded-full. 'rounded-sm' applies a small, subtle radius for a clean and minimal edge effect.
class='rounded-sm border border-gray-300'
Tailwind supports blend modes for creative effects. 'bg-blend-multiply' blends the background image and color by multiplying their values, adding depth or color tone.
class='bg-blend-multiply bg-blue-500 bg-[url(bg.jpg)]'
Borders are useful for dividing sections, highlighting focus states, or creating subtle visual hierarchy. Tailwind makes it easy to control width, color, and corner radius to match any UI design without writing CSS manually.
Shadows add depth and realism to interfaces, helping users distinguish layers or interactive elements. In Tailwind, using shadows like shadow-md or shadow-xl gives a clean and modern visual elevation.
Rounded utilities change the element’s border radius to shape it visually. Ring utilities, on the other hand, create an outer highlight or focus outline around an element. They are often used together for buttons or interactive UI components.