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
Typography, Colors & Spacing interview questions for placements and exams.
Questions
16
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 color classes follow the pattern text-color-shade. 'text-blue-500' sets text color to a specific blue tone from the palette. The 500 shade is often the base color.
class='text-blue-500 hover:text-blue-700'
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.
Tailwind’s spacing scale is based on a multiple of 0.25rem. 'p-4' means padding of 1rem (4 × 0.25rem). Similarly, 'm-4' adds 1rem margin.
class='p-4 m-2'
The 'uppercase' class transforms text to all capital letters. Tailwind also includes 'lowercase' and 'capitalize' for other text transformations.
class='uppercase tracking-widest'
The 'text-lg' class increases the font size to the large preset value. Tailwind provides a full scale from text-xs to text-9xl for flexible typography.
class='text-lg font-semibold'
Tailwind uses the 'font-' prefix for weight control. 'font-bold' applies font-weight: 700 to make text bold and visually stronger.
class='font-bold text-gray-800'
The 'bg-' prefix in Tailwind defines background colors. 'bg-red-500' applies a moderate red tone, while you can use different shades from 100 to 900 for variations.
class='bg-red-500 text-white'
Tailwind’s 'text-center' class applies text-align: center, making it easy to center headings, paragraphs, or button labels.
class='text-center text-gray-700'
The 'leading-' utilities control line height. For example, 'leading-tight' reduces spacing between lines while 'leading-loose' increases it, improving text readability.
class='text-lg leading-relaxed'
Tailwind uses 'tracking-' utilities to set letter spacing. 'tracking-wide' adds more space between characters, useful for headings or uppercase text.
class='tracking-wide uppercase'
The 'mx-auto' class applies margin-left and margin-right as auto, which centers block elements like divs or containers horizontally.
class='w-1/2 mx-auto'
Tailwind provides font utilities like font-sans, font-serif, and font-mono. 'font-sans' applies the default sans-serif stack for modern clean typography.
class='font-sans text-gray-800'
The 'antialiased' utility improves text rendering on screens by smoothing edges, making fonts look cleaner and more polished.
class='antialiased text-gray-900'
Tailwind organizes colors in scales from 50 to 900. Lower numbers are lighter shades, and higher numbers are darker tones. This structure allows you to maintain color consistency and quickly adjust contrast levels for different components.
The built-in typography scale provides consistent font sizing across components. It helps maintain visual balance between headings, paragraphs, and captions. You can customize these values in tailwind.config.js to match your brand design.
Using the spacing scale ensures uniform spacing across the UI. It maintains rhythm and balance while making designs easier to modify globally. It also avoids inconsistencies that often appear when using arbitrary pixel values.
You can apply different text size classes for various breakpoints, such as text-base on small screens and text-2xl on large ones. This approach keeps typography adaptable to different devices without writing custom media queries.