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
Tech Mahindra · Tailwind CSS
Practice Tailwind CSS questions specifically asked in Tech Mahindra interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
41
Tagged for this company + subject
Company
Tech Mahindra
View company-wise questions
Subject
Tailwind CSS
Explore topic-wise practice
Go through each question and its explanation. Use this page for targeted revision just before your Tech Mahindra Tailwind CSS round.
When you use 'extend', Tailwind keeps its default values and adds yours on top. Using 'theme' replaces the defaults entirely, which is useful if you want to create a fully custom design system.
theme: { extend: { colors: { brand: '#1E40AF' } } }For complete preparation, combine this company + subject page with full company-wise practice and subject-wise practice. You can also explore other companies and topics from the links below.
Custom fonts are defined in the fontFamily section of the theme object. Once added, they can be applied with utility classes like font-sans or font-display. This helps maintain consistent typography throughout your project.
theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'] } } }The 'items-center' class aligns items along the cross axis of a flex container. It’s commonly used with 'flex' and 'justify-center' to fully center content both ways.
class='flex items-center justify-center h-screen'
The 'uppercase' class transforms text to all capital letters. Tailwind also includes 'lowercase' and 'capitalize' for other text transformations.
class='uppercase tracking-widest'
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'
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'
You can use 'first:' and 'last:' variants to style the first or last element in a list. It’s helpful for rounded corners or removing extra borders in grouped elements.
class='first:rounded-t last:rounded-b'
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'
To use Tailwind in your project, you install it using npm install tailwindcss and initialize it with npx tailwindcss init. This generates the configuration file for customization.
npm install tailwindcss npx tailwindcss init
Tailwind is flexible. You can still use your own CSS for specific needs or extend Tailwind’s theme using tailwind.config.js for custom utilities.
Plugins extend Tailwind by adding new utilities, components, or variants. For example, the official typography and forms plugins enhance readability and form styling automatically.
plugins: [require('@tailwindcss/typography')]Tailwind uses 'flex-col' to make items align vertically. By default, 'flex' arranges children in a row. Changing it to column stacks them top to bottom.
class='flex flex-col gap-4'
The 'grid' class applies display: grid. You can then use 'grid-cols-' or 'grid-rows-' utilities to define columns or rows for your layout.
class='grid grid-cols-3 gap-6'
Tailwind provides classes like 'absolute', 'relative', and 'fixed' to control positioning. Using 'absolute' positions the element relative to its first positioned ancestor.
class='relative'><div class='absolute top-0 left-0'>
By default, grids fill rows first. The 'grid-flow-col' class makes grid items flow across columns instead, changing how new items are placed in the grid.
class='grid grid-flow-col gap-4'
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'
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'
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'
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'
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'
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'
The 'animate-spin' class rotates the element continuously, often used for loading icons or progress indicators.
class='animate-spin h-6 w-6 text-blue-500'
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 'media' strategy uses the CSS media query '(prefers-color-scheme: dark)' to automatically switch themes based on system preferences.
The 'focus:' variant activates when an input or button receives keyboard or mouse focus. It’s useful for accessibility and visual feedback in forms.
class='focus:outline-none focus:ring-2 focus:ring-blue-500'
The 'group-hover' variant allows child elements to react to the hover state of a parent with the 'group' class. It’s powerful for creating interactive card or dropdown animations.
<div class='group hover:bg-gray-100'><p class='group-hover:text-blue-500'>Hover me</p></div>
Tailwind’s 'placeholder:' variant lets you style placeholder text in input fields. For example, 'placeholder-gray-400' changes its color.
class='placeholder-gray-400 focus:placeholder-gray-600'
The 'duration-' utilities define how long a transition takes. For instance, 'duration-500' means the transition completes in 0.5 seconds.
class='transition duration-500 ease-in-out'
The 'rotate-45' utility rotates the element by 45 degrees clockwise. You can combine it with hover states for interactive rotation effects.
class='transform hover:rotate-45'
The 'animate-pulse' animation repeatedly fades elements in and out softly, often used to indicate loading or active states.
class='animate-pulse bg-gray-200 h-6 w-32'
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'
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'
In Next.js, you typically import Tailwind’s compiled CSS inside app.js or the root layout file. This ensures all components inherit its utility styles globally.
import '../styles/globals.css';
The @apply directive lets you create custom reusable class definitions by combining Tailwind utilities inside your CSS. It helps reduce duplication.
@layer components { .btn { @apply px-4 py-2 bg-blue-500 text-white rounded; } }Tailwind’s responsive utilities like 'w-full sm:w-1/2' make images fluid. Combined with Next.js's Image component, it ensures adaptive performance across devices.
class='w-full sm:w-1/2 rounded-lg'
Apply the class .form-select to a select element. It adds proper height, padding, and a styled arrow that matches the Bootstrap theme.
<select class='form-select'><option>One</option></select>
Wrap an input and its label inside a .form-floating container. Always include a placeholder on the input so the label can float smoothly above the field when focused or filled.
<div class='form-floating'> <input type='email' class='form-control' id='mail' placeholder='name@example.com'> <label for='mail'>Email address</label> </div>
Inside an input group, wrap any prefix or suffix text in a span with the class .input-group-text. It keeps the text vertically aligned with the input and maintains consistent spacing.
<div class='input-group'> <span class='input-group-text'>₹</span> <input class='form-control' type='number'> </div>
Apply .form-control-plaintext to show text in line with other form controls but uneditable. It’s useful for displaying generated IDs or read-only details.
<input type='text' readonly class='form-control-plaintext' value='ID-1024'>