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
Google · Tailwind CSS
Practice Tailwind CSS questions specifically asked in Google interviews – ideal for online test preparation, technical rounds and final HR discussions.
Questions
57
Tagged for this company + subject
Company
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 Google Tailwind CSS round.
It avoids writing repetitive CSS rules, promotes consistency, and speeds up development. Developers can build fully custom designs while keeping styles easy to maintain and predictable.
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.
You can define custom keyframes and animations in the tailwind.config.js file under theme.extend.keyframes and theme.extend.animation. This lets you create branded motion patterns like sliding menus or fading alerts.
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.
Responsive prefixes like sm:, md:, lg:, xl: apply styles from a certain screen width upward. Tailwind compiles them into CSS media queries automatically. This makes it simple to design layouts that adapt seamlessly across devices.
Yes. You can combine multiple state variants like 'hover:focus:' or 'sm:hover:' to control styling under complex conditions. This flexibility allows precise control over how components behave across devices and interactions.
A transition smoothly changes properties between two states, like color on hover. An animation defines a continuous sequence of keyframes that repeat or move independently. In short, transitions react to events, while animations run automatically.
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.
Bootstrap provides pre-built components like navbars and modals, while Tailwind focuses on utility classes to design custom layouts. Tailwind gives more control over design, whereas Bootstrap emphasizes ready-made UI components.
You start by installing Tailwind, adding it to your CSS via @tailwind directives, and configuring your tailwind.config.js. Then you use utility classes directly in your HTML or JSX, build your design, and finally optimize your CSS for production.
Tailwind uses PurgeCSS (or the built-in content scan in JIT mode) to remove unused classes. This keeps the production CSS file very small and efficient for faster load times.
The main drawback is verbose HTML due to many utility classes. It also has a learning curve for beginners and may require a configuration step for custom designs. However, these trade-offs give better flexibility and performance long-term.
Once developers get used to its naming system, it becomes faster to prototype and build designs without switching between CSS and HTML files. The consistent naming convention also reduces mental effort in remembering custom class names.
The default theme provides a standard design system with preset values for colors, spacing, fonts, and breakpoints. It acts as a foundation so you can build custom themes without starting from scratch. Most customization extends this base theme.
To extend the theme, you use theme.extend inside tailwind.config.js. This merges your new values with Tailwind’s existing ones instead of replacing them. It’s useful for adding brand colors, spacing scales, or animations while preserving core styles.
Tailwind’s purge system scans files listed in the content array and keeps only the classes that are actually used. Unused utilities are removed from the final build. This reduces the CSS size dramatically, improving page speed and load time.
Customization ensures design consistency by defining one source of truth for spacing, colors, and typography. It also helps teams quickly adapt styles to match brand guidelines. By using config-based customization, your entire UI remains scalable and unified.
Organize your configuration logically by grouping related settings such as colors, fonts, and spacing. Use extend instead of replacing defaults whenever possible. For large projects, split config logic into separate files and import them for better maintainability.
Tailwind’s JIT engine scans for class names in your code. If they are dynamically generated, Tailwind might not detect them, leading to missing styles. The solution is to whitelist patterns or write explicit class names inside your files.
Flexbox is best for one-dimensional layouts — aligning items in a single row or column. Grid works better for two-dimensional layouts with rows and columns. In practice, use Flex for toolbars, menus, or buttons, and Grid for dashboards or gallery layouts.
Justify-content controls alignment along the main axis (horizontal for flex-row). Align-items manages alignment along the cross axis (vertical for flex-row). Together, they let you perfectly center or position items inside a flex container.
You can define different column counts for various screen sizes using breakpoint prefixes. For example, grid-cols-1 for mobile and grid-cols-3 for desktop. Tailwind’s responsive system makes it easy to adapt designs for all devices.
One method is to use Flex utilities: flex, justify-center, and items-center. Another is using Grid with place-items-center. Both approaches simplify centering without writing custom CSS.
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.
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.
You can add new screen sizes inside the theme.screens section of tailwind.config.js. Each key defines a minimum width for the breakpoint. This helps tailor responsive behavior for unique device widths or design requirements.
The 'media' strategy relies on system preferences, switching automatically based on the OS theme. The 'class' strategy gives developers full control by toggling a 'dark' class on the root element manually. Most apps use 'class' for flexibility in theme toggles.
Tailwind provides ready-to-use responsive utilities, breakpoint-based prefixes, and dark mode control, all within HTML. This eliminates the need for writing custom media queries, speeding up adaptive design workflows.
Dark mode enhances accessibility and reduces eye strain, especially in low-light environments. Developers can use the 'dark:' prefix to style themes without duplicating components. It’s often implemented in dashboards, apps, and blog sites for user preference.
Hover occurs when a user places their mouse over an element. Focus occurs when an element, like an input or button, is active or selected using keyboard navigation. Focus is essential for accessibility, ensuring non-mouse users get proper visual feedback.
‘group-hover’ makes child elements respond when the parent is hovered. It helps create smooth hover effects like revealing text or icons inside cards. This avoids complex JavaScript and keeps hover interactions purely in HTML and CSS.
You can use 'peer-checked' when you want one element’s state to affect another. For instance, showing or hiding a dropdown when a checkbox or toggle is active. It simplifies state-based interactivity without writing JavaScript.
State variants like focus and focus-visible help visually indicate which element is active. This supports keyboard and screen-reader users by providing visible cues. Accessible design ensures everyone can navigate your interface smoothly.
Tailwind supports the 'motion-reduce:' variant to disable or simplify animations for users who prefer less motion. It respects user system settings and improves accessibility for those sensitive to movement.
Transitions make hover effects smoother by easing property changes like color, opacity, or scale. This improves the feel of interactivity and makes UIs look more professional. Without transitions, hover effects appear abrupt or harsh.
Transform origin defines the pivot point around which scaling, rotation, or translation happens. For example, 'origin-top-left' rotates an element from its top-left corner, while 'origin-center' spins it around its center.
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.
You can use libraries like clsx or classnames to conditionally apply and organize Tailwind classes. This keeps JSX clean and improves readability while dynamically toggling states or themes.
Tailwind enforces a consistent design language by using pre-defined utilities. Teams can extend the theme config to match brand colors and spacing. This removes style conflicts and ensures every developer designs within the same visual framework.
Centralizing theme values makes it easier to update colors, fonts, or spacing globally. It ensures that brand changes only need to be made once in the Tailwind config. This approach simplifies maintenance and promotes UI consistency.
Enable purge mode to remove unused classes, use minification, and prefer JIT mode for generating classes on demand. Also, avoid unnecessary inline styles and reduce dynamic class name generation for optimal performance.
Tailwind integrates with Vue using PostCSS. You install Tailwind, import it into your main CSS file, and configure purge paths for .vue components. This ensures Vue’s template classes are scanned correctly for utility usage.
Common mistakes include overusing arbitrary values, mixing inline and utility styles, not purging unused CSS, or missing responsive breakpoints. Avoiding these keeps your project clean, fast, and easy to maintain.
The novalidate attribute disables the browser’s built-in validation messages. This allows you to use Bootstrap’s consistent feedback styling instead. On submit, run checkValidity() on the form. If it fails, prevent the submission and add the class .was-validated to reveal Bootstrap’s feedback messages.
const form = document.querySelector('form');
form.addEventListener('submit', e => {
if (!form.checkValidity()) { e.preventDefault(); }
form.classList.add('was-validated');
});Connect each label to its input using the for attribute with a matching id. This ensures screen readers read the label when the input gains focus. Add help text below inputs using a small element with an id, and link it using aria-describedby. This keeps the instructions clear for all users.
<label for='pwd' class='form-label'>Password</label> <input id='pwd' class='form-control' aria-describedby='pwdHelp'> <div id='pwdHelp' class='form-text'>Use eight or more characters.</div>
Floating labels are great for compact, single-line inputs like email or password fields. They save space while keeping labels visible. Two common pitfalls: long placeholder text can break the layout, and textareas need a fixed height. Always include a placeholder, even a blank one, so the label can float properly.
<div class='form-floating'> <input id='emailF' type='email' class='form-control' placeholder=' '> <label for='emailF'>Email</label> </div>
Input groups are useful for currency symbols, units, or quick actions like a copy button beside an input. They keep related controls visually grouped. For accessibility, wrap text inside .input-group-text and ensure all controls have clear labels or aria-labels if using icons.
<div class='input-group'> <span class='input-group-text'>%</span> <input class='form-control' type='number' aria-label='Discount percent'> <button class='btn btn-outline-secondary' aria-label='Apply'>Apply</button> </div>
Use the native file input with the class .form-control to match other fields. Add help text to describe allowed file types and sizes. After selection, show the chosen file name or upload progress. Keep error messages clear, such as 'file too large' or 'wrong type'.
<input class='form-control' type='file' id='resume' accept='.pdf,.docx'> <div class='form-text'>PDF or DOCX, max two megabytes.</div>
Arrange fields in a row using Bootstrap’s grid system with small gaps. On large screens, the form stays inline; on smaller ones, it wraps naturally. Include visible or visually hidden labels for accessibility. Make the submit button full width on mobile for easier tapping.
<form class='row g-2 align-items-center'> <div class='col-sm-auto'><label for='q' class='visually-hidden'>Search</label><input id='q' class='form-control' placeholder='Search'></div> <div class='col-sm-auto'><button class='btn btn-primary w-100 w-sm-auto'>Go</button></div> </form>
Listen for the input event on fields and check their validity. Then toggle the classes .is-valid or .is-invalid based on the result. Validate on blur for heavy checks like server-side email verification. Keep messages short and clear to help users correct errors easily.
const email = document.querySelector('#em');
email.addEventListener('input', () => {
email.classList.toggle('is-valid', email.checkValidity());
email.classList.toggle('is-invalid', !email.checkValidity());
});