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
Infosys · Tailwind CSS
Practice Tailwind CSS questions specifically asked in Infosys interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
36
Tagged for this company + subject
Company
Infosys
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 Infosys Tailwind CSS round.
Extending the theme allows teams to define shared design tokens for colors, fonts, spacing, and breakpoints. This creates a single source of truth for UI consistency.
theme: { extend: { colors: { brand: '#2563EB' } } }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.
Wrap each checkbox or radio input inside a .form-check div. The input should use .form-check-input and the label should use .form-check-label for correct spacing and alignment.
<div class='form-check'> <input class='form-check-input' type='checkbox' id='a1'> <label class='form-check-label' for='a1'>Accept</label> </div>
Tailwind CSS is known for its utility-first approach. Instead of writing custom CSS, you combine small utility classes directly in your HTML to style elements quickly and consistently.
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'
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'
The 'hover:' prefix applies a style when the user hovers over an element. It’s commonly used for button, link, or card hover effects in Tailwind.
class='bg-blue-500 hover:bg-blue-700'
The 'transition' class enables smooth transitions for style changes like color, background, or transform. It’s often used with hover effects to create polished UI interactions.
class='transition duration-300 hover:bg-blue-600'
JIT mode compiles classes as you use them in your project instead of generating all possible combinations. It makes builds faster and CSS files smaller.
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Tailwind speeds up development by letting developers use small, reusable utility classes instead of writing long CSS files. This reduces context switching between HTML and CSS.
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.
The tailwind.config.js file controls how Tailwind behaves. It allows you to customize colors, fonts, spacing, breakpoints, and other design settings. It acts like the control center for your entire Tailwind setup.
npx tailwindcss init
Tailwind scans your content files to find all used classes. Defining content paths ensures only those classes are included in the final CSS, keeping the build small. It’s essential for PurgeCSS and JIT mode to work efficiently.
content: ['./src/**/*.{html,js,jsx,ts,tsx}']Custom colors are added inside the theme.extend section of tailwind.config.js. This keeps existing Tailwind colors and adds your custom palette. You can then use these colors directly as class names like text-brand or bg-brand.
theme: { extend: { colors: { brand: '#0EA5E9' } } }The spacing scale defines values for padding, margin, and gap utilities. By extending theme.spacing, you can create consistent custom spacing sizes like 18px or 72px across your app.
theme: { extend: { spacing: { '18': '4.5rem' } } }The 'flex' class applies display: flex to an element, enabling Flexbox layout. Once active, you can use other flex utilities to control direction, alignment, and spacing.
class='flex items-center justify-between'
The class 'grid-cols-3' divides the container into three equal-width columns. You can use 'gap' utilities to control spacing between them.
class='grid grid-cols-3 gap-4'
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'>
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'
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'
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 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 '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'
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)]'
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 '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'
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 'disabled:' prefix applies styles only when an element is disabled. For example, 'disabled:opacity-50' dims a button to show it's inactive.
class='bg-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed'
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 'translate-x-4' utility shifts the element horizontally by 1rem to the right. Negative versions like '-translate-x-4' move it left.
class='transform hover:translate-x-4'
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'
In React, you install Tailwind with PostCSS and Autoprefixer for processing CSS. After installation, you create a Tailwind config and import the directives into index.css.
npm install tailwindcss postcss autoprefixer
Use the class .form-control on inputs and textareas to give them consistent padding, border, and focus styles. It ensures the elements align neatly with other form components.
<input type='text' class='form-control' placeholder='Your name'>
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>
Use .is-valid to show a green border and .is-invalid for a red one. These classes work best with feedback messages to guide the user through form validation.
<input class='form-control is-valid' value='ok'>
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'>