Tailwind CSS · Complete Question Bank

All Tailwind CSS Interview Questions

Practice the complete collection of Tailwind CSS interview questions including theory, coding, MCQs and real interview problems.

Total Questions: 164Topics: 16Complete interview preparation

Overview

Questions

164

Full database

Topics

Categorised

Difficulty

Mixed Levels

Easy Hard

All Tailwind CSS Interview Questions (164)

Scroll through every important Tailwind CSS question asked in real interviews. Includes MCQs, subjective questions, and coding prompts.

1. What is Tailwind CSS primarily known for?

Difficulty: EasyType: MCQTopic: Basics

Component-based design
Utility-first approach
Inline styling
Preprocessor functions

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.

Correct Answer: Utility-first approach

2. Which command installs Tailwind CSS via npm?

Difficulty: EasyType: MCQTopic: Setup

npm install tailwind
npm install tailwindcss
npm add twcss
npm init tailwind

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.

Correct Answer: npm install tailwindcss

Example Code

npm install tailwindcss
npx tailwindcss init

3. What is a 'utility class' in Tailwind CSS?

Difficulty: MediumType: MCQTopic: Basics

A reusable component
A class that applies one specific style rule
A CSS variable
A custom function

Each Tailwind utility class applies a single, specific CSS property — like margin, padding, color, or font-size. Combining multiple utilities builds complex designs without writing new CSS.

Correct Answer: A class that applies one specific style rule

Example Code

class='text-center text-blue-500 font-bold'

4. What is one major advantage of using Tailwind CSS?

Difficulty: MediumType: MCQTopic: Basics

Less HTML code
No need for JavaScript
Faster development with reusable classes
Inline style duplication

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.

Correct Answer: Faster development with reusable classes

5. Where do you include Tailwind’s base, components, and utilities in your project?

Difficulty: MediumType: MCQTopic: Setup

In index.html
In your CSS file using @tailwind directives
In JavaScript
Inside tailwind.config.js

Tailwind is added to your main CSS file using @tailwind base, @tailwind components, and @tailwind utilities directives. These import the framework’s styles into your project.

Correct Answer: In your CSS file using @tailwind directives

Example Code

@tailwind base;
@tailwind components;
@tailwind utilities;

6. Can you still write custom CSS with Tailwind?

Difficulty: MediumType: MCQTopic: Practices

No, Tailwind blocks custom CSS
Yes, but only inline
Yes, by extending in the config or adding stylesheets
Only with plugins

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.

Correct Answer: Yes, by extending in the config or adding stylesheets

7. What does JIT mode do in Tailwind?

Difficulty: MediumType: MCQTopic: Setup

Compress CSS manually
Generate styles on demand
Remove unused classes
Create responsive variants

JIT (Just-In-Time) mode generates CSS only for the classes you use in your files. It’s faster and more efficient, making builds lightweight and instant during development.

Correct Answer: Generate styles on demand

8. How is Tailwind CSS different from Bootstrap?

Difficulty: MediumType: SubjectiveTopic: Basics

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.

9. Explain the typical workflow of using Tailwind CSS in a project.

Difficulty: MediumType: SubjectiveTopic: Practices

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.

10. How does Tailwind reduce the final CSS file size in production?

Difficulty: MediumType: SubjectiveTopic: Setup

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.

11. What are the benefits of the utility-first approach in Tailwind CSS?

Difficulty: MediumType: SubjectiveTopic: Basics

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.

12. What are some limitations or drawbacks of Tailwind CSS?

Difficulty: HardType: SubjectiveTopic: Basics

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.

13. Why do some developers find Tailwind easier after initial setup?

Difficulty: HardType: SubjectiveTopic: Basics

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.

14. What is the purpose of the tailwind.config.js file?

Difficulty: EasyType: MCQTopic: Setup

To add JavaScript logic
To configure your Tailwind project
To store component HTML
To define colors only

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.

Correct Answer: To configure your Tailwind project

Example Code

npx tailwindcss init

15. What is the difference between 'extend' and 'theme' in Tailwind configuration?

Difficulty: MediumType: MCQTopic: Practices

Extend adds new values, theme replaces defaults
Both replace defaults
Extend removes values
Theme only adds colors

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.

Correct Answer: Extend adds new values, theme replaces defaults

Example Code

theme: { extend: { colors: { brand: '#1E40AF' } } }

16. Why do we define content paths in the configuration file?

Difficulty: MediumType: MCQTopic: Setup

To improve SEO
To tell Tailwind where to look for class names
To compress CSS
To enable animations

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.

Correct Answer: To tell Tailwind where to look for class names

Example Code

content: ['./src/**/*.{html,js,jsx,ts,tsx}']

17. How do you add a new color to your Tailwind theme?

Difficulty: MediumType: MCQTopic: Theme

By editing CSS directly
Using the extend property in config
By changing @tailwind utilities
By creating a .scss file

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.

Correct Answer: Using the extend property in config

Example Code

theme: { extend: { colors: { brand: '#0EA5E9' } } }

18. Where do you define custom fonts in Tailwind CSS?

Difficulty: MediumType: MCQTopic: Theme

Inside theme.fontFamily
In CSS only
In components directory
Inside base layer

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.

Correct Answer: Inside theme.fontFamily

Example Code

theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'] } } }

19. How can you define custom spacing values like padding or margin?

Difficulty: MediumType: MCQTopic: Theme

Add them to theme.spacing
Write them in CSS
Use inline styles
Add them to theme.fontSize

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.

Correct Answer: Add them to theme.spacing

Example Code

theme: { extend: { spacing: { '18': '4.5rem' } } }

20. What is the purpose of Tailwind plugins?

Difficulty: MediumType: MCQTopic: Theme

To add new CSS features
To modify HTML structure
To manage breakpoints
To handle JavaScript logic

Plugins extend Tailwind by adding new utilities, components, or variants. For example, the official typography and forms plugins enhance readability and form styling automatically.

Correct Answer: To add new CSS features

Example Code

plugins: [require('@tailwindcss/typography')]

21. Explain the purpose of Tailwind’s default theme.

Difficulty: MediumType: SubjectiveTopic: Theme

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.

22. How do you extend Tailwind’s theme without removing defaults?

Difficulty: MediumType: SubjectiveTopic: 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.

23. How does Tailwind remove unused CSS in production builds?

Difficulty: MediumType: SubjectiveTopic: Setup

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.

24. What are the benefits of customizing the Tailwind theme?

Difficulty: MediumType: SubjectiveTopic: Theme

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.

25. What are best practices for managing large Tailwind configuration files?

Difficulty: HardType: SubjectiveTopic: Practices

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.

26. Why might dynamic class names cause issues in Tailwind’s build process?

Difficulty: HardType: SubjectiveTopic: Perf

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.

27. Which Tailwind class makes an element use Flexbox layout?

Difficulty: EasyType: MCQTopic: Layout

flexbox
display-flex
flex
d-flex

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.

Correct Answer: flex

Example Code

class='flex items-center justify-between'

28. Which class sets the Flexbox direction to column?

Difficulty: MediumType: MCQTopic: Layout

flex-down
flex-vertical
flex-col
column

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.

Correct Answer: flex-col

Example Code

class='flex flex-col gap-4'

29. Which class centers items horizontally in a flex container?

Difficulty: MediumType: MCQTopic: Layout

items-center
justify-center
justify-items-center
content-center

The 'justify-center' class aligns items along the main axis of the Flex container. In a row direction, it centers items horizontally.

Correct Answer: justify-center

Example Code

class='flex justify-center'

30. Which class vertically centers items in a flex container?

Difficulty: MediumType: MCQTopic: Layout

align-center
items-center
justify-center
content-middle

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.

Correct Answer: items-center

Example Code

class='flex items-center justify-center h-screen'

31. What does the 'gap-4' utility do in Tailwind?

Difficulty: MediumType: MCQTopic: Layout

Adds margin around element
Adds spacing between flex or grid items
Adds padding inside element
Sets border spacing

The 'gap' utility defines consistent spacing between items in Flex or Grid containers without adding extra margin or padding. It's cleaner than manually spacing each item.

Correct Answer: Adds spacing between flex or grid items

Example Code

class='flex gap-4'

32. Which class enables CSS Grid layout in Tailwind?

Difficulty: MediumType: MCQTopic: Layout

display-grid
grid
gridbox
layout-grid

The 'grid' class applies display: grid. You can then use 'grid-cols-' or 'grid-rows-' utilities to define columns or rows for your layout.

Correct Answer: grid

Example Code

class='grid grid-cols-3 gap-6'

33. What does 'grid-cols-3' mean in Tailwind?

Difficulty: MediumType: MCQTopic: Layout

Three grid rows
Three equal columns
A three-column gap
A 3px column spacing

The class 'grid-cols-3' divides the container into three equal-width columns. You can use 'gap' utilities to control spacing between them.

Correct Answer: Three equal columns

Example Code

class='grid grid-cols-3 gap-4'

34. What does the 'container' class in Tailwind do?

Difficulty: MediumType: MCQTopic: Layout

Centers content and sets max-width at breakpoints
Adds margin automatically
Makes element a flex container
Adds padding on both sides

The 'container' class gives your layout a responsive fixed width that adapts at different screen sizes. It is commonly used to center page content.

Correct Answer: Centers content and sets max-width at breakpoints

Example Code

class='container mx-auto px-4'

35. Which class sets an element to absolute positioning?

Difficulty: MediumType: MCQTopic: Layout

pos-abs
absolute
position-absolute
static

Tailwind provides classes like 'absolute', 'relative', and 'fixed' to control positioning. Using 'absolute' positions the element relative to its first positioned ancestor.

Correct Answer: absolute

Example Code

class='relative'><div class='absolute top-0 left-0'>

36. Which class allows flex items to wrap onto multiple lines?

Difficulty: MediumType: MCQTopic: Layout

wrap
flex-wrap
flex-row
items-wrap

The 'flex-wrap' class lets items move onto new lines when they overflow the container width. It’s often used with grids or lists to keep layouts neat.

Correct Answer: flex-wrap

Example Code

class='flex flex-wrap gap-2'

37. What does 'grid-flow-col' do in Tailwind CSS?

Difficulty: MediumType: MCQTopic: Layout

Creates column flow in grid items
Centers items vertically
Creates equal spacing
Defines column gaps

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.

Correct Answer: Creates column flow in grid items

Example Code

class='grid grid-flow-col gap-4'

38. When should you use Flexbox versus Grid in Tailwind CSS?

Difficulty: MediumType: SubjectiveTopic: Layout

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.

39. Explain the difference between justify-content and align-items in Tailwind.

Difficulty: MediumType: SubjectiveTopic: Layout

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.

40. How can you make a responsive grid layout using Tailwind CSS?

Difficulty: MediumType: SubjectiveTopic: Layout

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.

41. What are two ways to center content both vertically and horizontally using Tailwind?

Difficulty: MediumType: SubjectiveTopic: Layout

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.

42. Which class sets the font size to large in Tailwind?

Difficulty: EasyType: MCQTopic: Typography

font-lg
text-lg
size-large
text-big

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.

Correct Answer: text-lg

Example Code

class='text-lg font-semibold'

43. Which class makes text bold in Tailwind?

Difficulty: EasyType: MCQTopic: Typography

bold
font-bold
text-strong
font-heavy

Tailwind uses the 'font-' prefix for weight control. 'font-bold' applies font-weight: 700 to make text bold and visually stronger.

Correct Answer: font-bold

Example Code

class='font-bold text-gray-800'

44. What does the class 'text-blue-500' do?

Difficulty: MediumType: MCQTopic: Colors

Adds a blue background
Sets text color to medium blue
Applies border color blue
Makes text glow

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.

Correct Answer: Sets text color to medium blue

Example Code

class='text-blue-500 hover:text-blue-700'

45. Which class gives an element a red background?

Difficulty: MediumType: MCQTopic: Colors

color-red
bg-red-500
background-red
text-red-500

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.

Correct Answer: bg-red-500

Example Code

class='bg-red-500 text-white'

46. Which class centers text horizontally?

Difficulty: EasyType: MCQTopic: Typography

center-text
text-center
justify-center
align-middle

Tailwind’s 'text-center' class applies text-align: center, making it easy to center headings, paragraphs, or button labels.

Correct Answer: text-center

Example Code

class='text-center text-gray-700'

47. Which utility adjusts line height in Tailwind?

Difficulty: MediumType: MCQTopic: Typography

leading-
spacing-
tracking-
line-

The 'leading-' utilities control line height. For example, 'leading-tight' reduces spacing between lines while 'leading-loose' increases it, improving text readability.

Correct Answer: leading-

Example Code

class='text-lg leading-relaxed'

48. What does 'tracking-wide' control?

Difficulty: MediumType: MCQTopic: Typography

Word spacing
Letter spacing
Line height
Font weight

Tailwind uses 'tracking-' utilities to set letter spacing. 'tracking-wide' adds more space between characters, useful for headings or uppercase text.

Correct Answer: Letter spacing

Example Code

class='tracking-wide uppercase'

49. What does 'p-4' represent in Tailwind?

Difficulty: MediumType: MCQTopic: Practices

Padding 4px
Padding 1rem
Margin 4px
Border 4px

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.

Correct Answer: Padding 1rem

Example Code

class='p-4 m-2'

50. Which class centers a block element horizontally?

Difficulty: MediumType: MCQTopic: Layout

center
justify-center
mx-auto
px-center

The 'mx-auto' class applies margin-left and margin-right as auto, which centers block elements like divs or containers horizontally.

Correct Answer: mx-auto

Example Code

class='w-1/2 mx-auto'

51. What does 'font-sans' apply in Tailwind CSS?

Difficulty: MediumType: MCQTopic: Typography

Serif fonts
Monospace fonts
Sans-serif fonts
Cursive fonts

Tailwind provides font utilities like font-sans, font-serif, and font-mono. 'font-sans' applies the default sans-serif stack for modern clean typography.

Correct Answer: Sans-serif fonts

Example Code

class='font-sans text-gray-800'

52. Which utility converts text to uppercase?

Difficulty: MediumType: MCQTopic: Typography

text-cap
uppercase
capitalize
upper

The 'uppercase' class transforms text to all capital letters. Tailwind also includes 'lowercase' and 'capitalize' for other text transformations.

Correct Answer: uppercase

Example Code

class='uppercase tracking-widest'

53. What does 'antialiased' do in Tailwind CSS?

Difficulty: MediumType: MCQTopic: Typography

Removes blur
Smooths font rendering
Increases line height
Adds text shadow

The 'antialiased' utility improves text rendering on screens by smoothing edges, making fonts look cleaner and more polished.

Correct Answer: Smooths font rendering

Example Code

class='antialiased text-gray-900'

54. Explain how the color palette system works in Tailwind CSS.

Difficulty: MediumType: SubjectiveTopic: Colors

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.

55. What are the benefits of using Tailwind’s built-in typography scale?

Difficulty: MediumType: SubjectiveTopic: Typography

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.

56. Why is using Tailwind’s spacing scale better than using random pixel values?

Difficulty: MediumType: SubjectiveTopic: Practices

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.

57. How can you make text sizes responsive in Tailwind?

Difficulty: MediumType: SubjectiveTopic: Typography

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.

58. Which class adds a blue background in Tailwind?

Difficulty: EasyType: MCQTopic: Colors

color-blue
bg-blue-500
background-blue
fill-blue

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.

Correct Answer: bg-blue-500

Example Code

class='bg-blue-500 text-white'

59. Which class applies a gradient background from left to right?

Difficulty: MediumType: MCQTopic: Colors

bg-linear
bg-gradient-to-r
bg-to-right
gradient-horizontal

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.

Correct Answer: bg-gradient-to-r

Example Code

class='bg-gradient-to-r from-blue-400 to-green-500'

60. What does 'bg-gradient-to-b' do?

Difficulty: MediumType: MCQTopic: Colors

Creates a horizontal gradient
Creates a vertical gradient top to bottom
Adds transparency
Applies shadow to bottom

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.

Correct Answer: Creates a vertical gradient top to bottom

Example Code

class='bg-gradient-to-b from-purple-400 to-indigo-700'

61. Which class prevents background images from repeating?

Difficulty: MediumType: MCQTopic: Colors

bg-no-repeat
bg-stop
no-repeat-bg
repeat-none

The 'bg-no-repeat' class sets background-repeat to none. It’s commonly used with custom background images to prevent tile repetition.

Correct Answer: bg-no-repeat

Example Code

class='bg-no-repeat bg-cover bg-center'

62. What does 'border-red-500' do?

Difficulty: MediumType: MCQTopic: Effects

Sets border width
Adds red background
Changes border color to red
Removes border

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.

Correct Answer: Changes border color to red

Example Code

class='border border-red-500 rounded-lg'

63. Which class applies a 2-pixel border to all sides?

Difficulty: MediumType: MCQTopic: Effects

border-1
border-2
border-thick
border-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.

Correct Answer: border-2

Example Code

class='border-2 border-gray-400'

64. What does the class 'rounded-full' do?

Difficulty: MediumType: MCQTopic: Effects

Adds 50% padding
Makes an element fully circular
Adds shadow to corners
Removes all corners

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.

Correct Answer: Makes an element fully circular

Example Code

class='w-16 h-16 rounded-full bg-blue-500'

65. Which class adds a soft shadow under an element?

Difficulty: MediumType: MCQTopic: Effects

shadow-light
shadow-md
shadow-2xl
shadow-soft

Tailwind includes predefined shadow utilities like shadow-sm, shadow-md, and shadow-xl. 'shadow-md' provides a balanced depth for cards and containers.

Correct Answer: shadow-md

Example Code

class='bg-white p-6 shadow-md rounded-lg'

66. Which class applies slightly rounded corners?

Difficulty: MediumType: MCQTopic: Effects

rounded-none
rounded-sm
rounded-lg
rounded-full

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.

Correct Answer: rounded-sm

Example Code

class='rounded-sm border border-gray-300'

67. What do ring utilities in Tailwind CSS control?

Difficulty: MediumType: MCQTopic: Effects

Padding size
Focus outlines and emphasis rings
Image borders
Grid spacing

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.

Correct Answer: Focus outlines and emphasis rings

Example Code

class='focus:ring-2 focus:ring-blue-500'

68. Which class changes how background images and colors mix?

Difficulty: MediumType: MCQTopic: Colors

bg-blend-mode
bg-blend-multiply
blend-bg
mix-bg

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.

Correct Answer: bg-blend-multiply

Example Code

class='bg-blend-multiply bg-blue-500 bg-[url(bg.jpg)]'

69. How can you customize gradient colors in Tailwind CSS?

Difficulty: MediumType: SubjectiveTopic: Theme

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.

70. When should you use border utilities in Tailwind?

Difficulty: MediumType: SubjectiveTopic: Effects

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.

71. What is the role of shadows in UI design?

Difficulty: MediumType: SubjectiveTopic: Effects

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.

72. How do rounded and ring utilities differ in Tailwind CSS?

Difficulty: MediumType: SubjectiveTopic: Effects

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.

73. What approach does Tailwind CSS follow for responsive design?

Difficulty: EasyType: MCQTopic: Responsive

Desktop-first
Mobile-first
Fixed layout
Fluid-only

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.

Correct Answer: Mobile-first

Example Code

class='text-sm md:text-lg lg:text-xl'

74. What does the prefix 'md:' indicate in Tailwind CSS?

Difficulty: MediumType: MCQTopic: Responsive

Minimum width 768px
Maximum width 768px
Applies only on mobile
Disables margin

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.

Correct Answer: Minimum width 768px

Example Code

class='bg-blue-300 md:bg-green-300'

75. At what width does the 'lg:' breakpoint start by default?

Difficulty: MediumType: MCQTopic: Responsive

640px
768px
1024px
1280px

In Tailwind’s default theme, 'lg:' begins at 1024px. It’s typically used for larger laptops and desktops.

Correct Answer: 1024px

Example Code

class='text-base lg:text-xl'

76. How do you apply different padding on small and large screens?

Difficulty: MediumType: MCQTopic: Responsive

p-4-lg
sm:p-2 lg:p-6
responsive:p-4
p-4:lg

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.

Correct Answer: sm:p-2 lg:p-6

Example Code

class='p-1 sm:p-2 lg:p-6'

77. Which class automatically adjusts max-width based on screen size?

Difficulty: MediumType: MCQTopic: Layout

w-full
max-w-auto
container
auto-width

The 'container' class in Tailwind provides a responsive fixed width that adapts at different breakpoints. It’s ideal for wrapping main content areas.

Correct Answer: container

Example Code

class='container mx-auto px-4'

78. How do you hide an element on mobile but show it on desktop?

Difficulty: MediumType: MCQTopic: Practices

hidden-lg
sm:hidden lg:block
lg:hidden sm:block
hide-mobile

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.

Correct Answer: sm:hidden lg:block

Example Code

class='sm:hidden lg:block'

79. How do you enable dark mode in Tailwind CSS?

Difficulty: MediumType: MCQTopic: Dark

Set darkMode: 'media' in tailwind.config.js
Use class='dark'
Add dark:true in CSS
Enable theme-dark plugin

You can enable dark mode either based on user’s OS setting ('media') or manually using the 'class' strategy in Tailwind’s configuration file.

Correct Answer: Set darkMode: 'media' in tailwind.config.js

Example Code

module.exports = { darkMode: 'class' }

80. What does the 'dark:' prefix do?

Difficulty: MediumType: MCQTopic: Dark

Applies styles only in dark mode
Adds background shadow
Changes contrast
Adds opacity

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.

Correct Answer: Applies styles only in dark mode

Example Code

class='bg-white dark:bg-gray-900'

81. What does 'darkMode: media' use to detect dark theme?

Difficulty: MediumType: MCQTopic: Dark

Browser cookies
User preference setting
System color scheme media query
Manual toggle

The 'media' strategy uses the CSS media query '(prefers-color-scheme: dark)' to automatically switch themes based on system preferences.

Correct Answer: System color scheme media query

82. Which utility ensures background image covers the entire element?

Difficulty: MediumType: MCQTopic: Responsive

bg-fit
bg-cover
bg-full
bg-auto

The 'bg-cover' class ensures that the background image scales proportionally to completely cover the element, maintaining its aspect ratio.

Correct Answer: bg-cover

Example Code

class='bg-cover bg-center'

83. How can you add custom breakpoints in Tailwind CSS?

Difficulty: MediumType: SubjectiveTopic: Theme

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.

84. What’s the difference between 'media' and 'class' strategies for dark mode?

Difficulty: MediumType: SubjectiveTopic: Dark

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.

85. How do responsive prefixes work in Tailwind?

Difficulty: MediumType: SubjectiveTopic: Responsive

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.

86. Why is Tailwind ideal for building adaptive designs?

Difficulty: MediumType: SubjectiveTopic: Responsive

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.

87. Describe a common use case for the dark mode feature in Tailwind CSS.

Difficulty: MediumType: SubjectiveTopic: Dark

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.

88. What does the 'hover:' prefix do in Tailwind CSS?

Difficulty: EasyType: MCQTopic: States

Adds background
Applies styles on hover state
Triggers animations
Disables text

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.

Correct Answer: Applies styles on hover state

Example Code

class='bg-blue-500 hover:bg-blue-700'

89. What does the 'focus:' variant control?

Difficulty: MediumType: MCQTopic: States

When the element is clicked
When the element is focused via keyboard or click
When mouse leaves the element
When user scrolls

The 'focus:' variant activates when an input or button receives keyboard or mouse focus. It’s useful for accessibility and visual feedback in forms.

Correct Answer: When the element is focused via keyboard or click

Example Code

class='focus:outline-none focus:ring-2 focus:ring-blue-500'

90. Which state variant applies when a button is being pressed?

Difficulty: MediumType: MCQTopic: States

focus:
hover:
active:
press:

The 'active:' variant applies styles while an element is in the pressed state. It’s typically used to make buttons feel responsive to user clicks.

Correct Answer: active:

Example Code

class='bg-blue-600 active:bg-blue-800'

91. Which class targets a disabled button state?

Difficulty: MediumType: MCQTopic: States

disable:
disabled:
inactive:
off:

The 'disabled:' prefix applies styles only when an element is disabled. For example, 'disabled:opacity-50' dims a button to show it's inactive.

Correct Answer: disabled:

Example Code

class='bg-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed'

92. What is the purpose of 'group-hover' in Tailwind?

Difficulty: MediumType: MCQTopic: States

Applies hover to multiple elements
Targets nested elements when parent is hovered
Changes hover speed
Hides groups

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.

Correct Answer: Targets nested elements when parent is hovered

Example Code

<div class='group hover:bg-gray-100'><p class='group-hover:text-blue-500'>Hover me</p></div>

93. What does the 'peer' class do in Tailwind CSS?

Difficulty: MediumType: MCQTopic: States

Creates a group of peers
Allows sibling elements to respond to another’s state
Adds accessibility focus
Handles animation delay

The 'peer' class marks an element that others can reference with 'peer-*' variants. It’s useful for form interactions like showing messages when a checkbox is checked.

Correct Answer: Allows sibling elements to respond to another’s state

Example Code

<input type='checkbox' class='peer'><p class='peer-checked:block hidden'>Visible on check</p>

94. When does 'focus-visible:' apply styles?

Difficulty: MediumType: MCQTopic: States

On any focus
Only when focused via keyboard navigation
On hover
After animation end

The 'focus-visible:' variant helps improve accessibility by styling elements only when focused through keyboard navigation, not by mouse clicks.

Correct Answer: Only when focused via keyboard navigation

Example Code

class='focus-visible:ring-2 focus-visible:ring-indigo-500'

95. Which variant customizes placeholder text color?

Difficulty: MediumType: MCQTopic: States

text-placeholder
placeholder:
input-placeholder:
before:

Tailwind’s 'placeholder:' variant lets you style placeholder text in input fields. For example, 'placeholder-gray-400' changes its color.

Correct Answer: placeholder:

Example Code

class='placeholder-gray-400 focus:placeholder-gray-600'

96. Which variants style alternate table rows?

Difficulty: MediumType: MCQTopic: States

alt:
odd: even:
alternate:
index:

The 'odd:' and 'even:' variants apply styles to alternating elements, commonly used in tables or lists to enhance readability.

Correct Answer: odd: even:

Example Code

class='odd:bg-gray-100 even:bg-white'

97. Which utilities target the first and last child elements?

Difficulty: MediumType: MCQTopic: States

nth:
child:
first: and last:
begin:

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.

Correct Answer: first: and last:

Example Code

class='first:rounded-t last:rounded-b'

98. What is the main difference between hover and focus states in Tailwind CSS?

Difficulty: MediumType: SubjectiveTopic: States

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.

99. Explain how 'group-hover' can enhance UI interactivity.

Difficulty: MediumType: SubjectiveTopic: States

‘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.

100. Give a use case where 'peer-checked' would be helpful.

Difficulty: MediumType: SubjectiveTopic: States

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.

101. Why are state variants important for accessibility?

Difficulty: MediumType: SubjectiveTopic: States

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.

102. Can Tailwind chain multiple state variants together? Explain.

Difficulty: HardType: SubjectiveTopic: States

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.

103. What does the 'transition' class in Tailwind CSS do?

Difficulty: EasyType: MCQTopic: Motion

Adds animation
Enables smooth property changes
Changes colors instantly
Controls grid layout

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.

Correct Answer: Enables smooth property changes

Example Code

class='transition duration-300 hover:bg-blue-600'

104. What does 'duration-500' specify in a transition?

Difficulty: MediumType: MCQTopic: Motion

Animation repeats 5 times
Transition lasts 500 milliseconds
Delay before transition
Speed is increased 5x

The 'duration-' utilities define how long a transition takes. For instance, 'duration-500' means the transition completes in 0.5 seconds.

Correct Answer: Transition lasts 500 milliseconds

Example Code

class='transition duration-500 ease-in-out'

105. Which class adds a delay before a transition starts?

Difficulty: MediumType: MCQTopic: Motion

delay-300
start-300
pause-300
wait-300

The 'delay-' utilities add a wait time before the transition begins. For example, 'delay-300' waits 300 milliseconds before animating the property.

Correct Answer: delay-300

Example Code

class='transition delay-300 hover:opacity-80'

106. Which easing function makes animations start slow and end fast?

Difficulty: MediumType: MCQTopic: Motion

ease-linear
ease-in
ease-out
ease-in-out

The 'ease-in' easing function starts the animation slowly and speeds up toward the end, giving a natural acceleration effect.

Correct Answer: ease-in

Example Code

class='transition ease-in duration-300'

107. What does 'scale-110' do when used with 'transform'?

Difficulty: MediumType: MCQTopic: Motion

Reduces element size
Increases size by 10%
Rotates element
Moves element left

The 'scale-110' class increases the element’s size by 10%. It requires the 'transform' utility to be active for the effect to apply properly.

Correct Answer: Increases size by 10%

Example Code

class='transform hover:scale-110'

108. What does 'rotate-45' do in Tailwind?

Difficulty: MediumType: MCQTopic: Motion

Adds rotation of 45 degrees
Skews the element
Moves element diagonally
Sets border radius to 45px

The 'rotate-45' utility rotates the element by 45 degrees clockwise. You can combine it with hover states for interactive rotation effects.

Correct Answer: Adds rotation of 45 degrees

Example Code

class='transform hover:rotate-45'

109. What does 'translate-x-4' do?

Difficulty: MediumType: MCQTopic: Motion

Moves the element 4px left
Moves element 1rem right
Adds padding
Adds a shadow

The 'translate-x-4' utility shifts the element horizontally by 1rem to the right. Negative versions like '-translate-x-4' move it left.

Correct Answer: Moves element 1rem right

Example Code

class='transform hover:translate-x-4'

110. Which built-in animation makes an element spin continuously?

Difficulty: MediumType: MCQTopic: Motion

animate-rotate
animate-spin
rotate-loop
spin-fast

The 'animate-spin' class rotates the element continuously, often used for loading icons or progress indicators.

Correct Answer: animate-spin

Example Code

class='animate-spin h-6 w-6 text-blue-500'

111. What does the 'animate-ping' animation effect do?

Difficulty: MediumType: MCQTopic: Motion

Fades element in and out
Expands and fades element like a ripple
Shakes the element
Changes opacity slowly

The 'animate-ping' class creates a pulsing ring effect where the element grows and fades, mimicking a radar or ripple motion.

Correct Answer: Expands and fades element like a ripple

Example Code

class='animate-ping absolute h-4 w-4 bg-blue-400 rounded-full'

112. Which animation creates a soft glow or breathing effect?

Difficulty: MediumType: MCQTopic: Motion

animate-ping
animate-pulse
animate-fade
animate-soft

The 'animate-pulse' animation repeatedly fades elements in and out softly, often used to indicate loading or active states.

Correct Answer: animate-pulse

Example Code

class='animate-pulse bg-gray-200 h-6 w-32'

113. How can you define custom animations in Tailwind CSS?

Difficulty: MediumType: SubjectiveTopic: Motion

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.

114. Explain the difference between a transition and an animation in Tailwind.

Difficulty: MediumType: SubjectiveTopic: Motion

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.

115. How does Tailwind handle motion reduction for accessibility?

Difficulty: MediumType: SubjectiveTopic: Motion

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.

116. How can transitions improve hover interactions in UI design?

Difficulty: MediumType: SubjectiveTopic: States

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.

117. What does 'origin-center' or 'origin-top-left' control in transformations?

Difficulty: MediumType: SubjectiveTopic: Motion

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.

118. Which classes create a basic blue button with white text and rounded corners?

Difficulty: EasyType: MCQTopic: Components

bg-blue-500 text-white rounded
text-blue-500 border rounded
bg-white text-blue-500 rounded
rounded-none text-white

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.

Correct Answer: bg-blue-500 text-white rounded

Example Code

class='bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'

119. Which classes help you make a basic card container?

Difficulty: MediumType: MCQTopic: Components

shadow-lg rounded-lg p-4 bg-white
bg-gray-900 flex-grow
rounded-full text-center
flex justify-center items-center

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.

Correct Answer: shadow-lg rounded-lg p-4 bg-white

Example Code

class='bg-white rounded-lg shadow-lg p-4'

120. Which utility ensures a modal overlay covers the entire screen?

Difficulty: MediumType: MCQTopic: Components

w-full h-full fixed inset-0
absolute top-0 left-0
flex-1 grow
relative block

The 'fixed inset-0' combo positions the modal overlay across the full viewport. 'w-full h-full' ensures the overlay spans the entire width and height.

Correct Answer: w-full h-full fixed inset-0

Example Code

class='fixed inset-0 w-full h-full bg-black/50 flex items-center justify-center'

121. Which utilities create a horizontal navbar with space between items?

Difficulty: MediumType: MCQTopic: Components

flex justify-between items-center
grid grid-cols-2 gap-4
block text-center
float-left clear-right

Using Flexbox utilities 'flex justify-between items-center' creates a responsive navbar with evenly spaced items on both sides.

Correct Answer: flex justify-between items-center

Example Code

class='flex justify-between items-center px-6 py-4 bg-gray-800 text-white'

122. Which class combination makes an image perfectly circular?

Difficulty: MediumType: MCQTopic: Components

rounded-full object-cover
rounded-lg object-scale
object-fit rounded
circle-img

The 'rounded-full' class sets a full border radius, while 'object-cover' ensures the image fills its container without distortion — ideal for profile avatars.

Correct Answer: rounded-full object-cover

Example Code

class='w-20 h-20 rounded-full object-cover'

123. How do you create a 3-column grid for images?

Difficulty: MediumType: MCQTopic: Components

grid grid-cols-3 gap-4
flex flex-row divide-x
columns-3
flex-wrap justify-evenly

Tailwind’s grid utilities make multi-column layouts simple. 'grid grid-cols-3 gap-4' divides the container into three equal columns with spacing between them.

Correct Answer: grid grid-cols-3 gap-4

Example Code

class='grid grid-cols-3 gap-4'

124. Which set of classes makes a badge or tag element?

Difficulty: MediumType: MCQTopic: Components

inline-block px-2 py-1 text-xs rounded-full bg-green-100 text-green-800
block border rounded-xl
inline text-lg bg-gray-800
badge-sm bg-gray

Badges or tags are usually small inline-block elements with soft colors and full rounding for pill shapes. Tailwind utilities make them quick to style.

Correct Answer: inline-block px-2 py-1 text-xs rounded-full bg-green-100 text-green-800

Example Code

class='inline-block px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800'

125. Which class makes cards stack on mobile and align in a row on larger screens?

Difficulty: MediumType: MCQTopic: Components

flex flex-col md:flex-row
grid grid-cols-1 lg:grid-cols-3
block md:inline
row-auto col-auto

Tailwind’s responsive utilities let you change layout per breakpoint. 'flex flex-col md:flex-row' stacks items vertically on mobile and horizontally on desktops.

Correct Answer: flex flex-col md:flex-row

Example Code

class='flex flex-col md:flex-row gap-4'

126. Which utilities center an element both vertically and horizontally?

Difficulty: EasyType: MCQTopic: Layout

flex items-center justify-center
grid place-content-center
text-center
flex-wrap-center

Combining 'flex items-center justify-center' centers content in both directions — perfect for modals, icons, or loaders.

Correct Answer: flex items-center justify-center

Example Code

class='flex items-center justify-center h-screen'

127. Which class adds deeper shadow for card elevation?

Difficulty: MediumType: MCQTopic: Effects

shadow-md
shadow-lg
shadow-xl
shadow-none

Tailwind provides various shadow depths. 'shadow-xl' gives more elevation, making elements pop visually on light backgrounds.

Correct Answer: shadow-xl

Example Code

class='bg-white rounded-lg shadow-xl p-6'

128. Why is Tailwind good for building reusable components?

Difficulty: MediumType: SubjectiveTopic: Components

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.

129. How can you customize a button design for different states in Tailwind?

Difficulty: MediumType: SubjectiveTopic: Components

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.

130. Describe a simple responsive card layout pattern using Tailwind.

Difficulty: MediumType: SubjectiveTopic: Components

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.

131. How does Tailwind simplify theming across multiple components?

Difficulty: MediumType: SubjectiveTopic: Components

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.

132. How can you design a reusable card component for dashboards using Tailwind?

Difficulty: HardType: SubjectiveTopic: Basics

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.

133. Which command installs Tailwind CSS in a React project created with Create React App?

Difficulty: MediumType: MCQTopic: Integration

npm install tailwindcss postcss autoprefixer
npm install tailwind-react
yarn add tailwind-theme
npx tailwind add react

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.

Correct Answer: npm install tailwindcss postcss autoprefixer

Example Code

npm install tailwindcss postcss autoprefixer

134. Where do you import Tailwind’s global CSS in a Next.js project?

Difficulty: MediumType: MCQTopic: Integration

In app.js or layout.js file
In next.config.js
Inside a Tailwind directory
At the top of every component

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.

Correct Answer: In app.js or layout.js file

Example Code

import '../styles/globals.css';

135. How does Tailwind remove unused styles in production?

Difficulty: MediumType: MCQTopic: Perf

Through content scanning and tree-shaking
By deleting node_modules
Using CSS minification only
Manually removing files

Tailwind scans all specified content paths and removes unused classes during the build. This keeps production bundles lightweight and fast.

Correct Answer: Through content scanning and tree-shaking

Example Code

content: ['./src/**/*.{js,jsx,ts,tsx,html}']

136. What is the purpose of JIT (Just-In-Time) mode in Tailwind?

Difficulty: MediumType: MCQTopic: Setup

To generate styles on demand
To load external stylesheets
To compile JavaScript files faster
To remove CSS dependencies

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.

Correct Answer: To generate styles on demand

Example Code

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

137. Can Tailwind be used with styled-components or CSS-in-JS libraries?

Difficulty: MediumType: MCQTopic: Integration

Yes, by using @apply with styled-components
No, they are incompatible
Only with Vue projects
Only with global styles

You can combine Tailwind and styled-components using the @apply directive to inject utility styles directly into CSS-in-JS blocks for hybrid styling flexibility.

Correct Answer: Yes, by using @apply with styled-components

138. What’s a common way to reuse Tailwind-based styles across multiple components?

Difficulty: MediumType: MCQTopic: Components

Extract them into reusable class patterns using @apply
Use global selectors
Add inline CSS
Write custom media queries

The @apply directive lets you create custom reusable class definitions by combining Tailwind utilities inside your CSS. It helps reduce duplication.

Correct Answer: Extract them into reusable class patterns using @apply

Example Code

@layer components { .btn { @apply px-4 py-2 bg-blue-500 text-white rounded; } }

139. How do teams maintain consistent naming and design language with Tailwind?

Difficulty: MediumType: MCQTopic: Practices

By extending the theme configuration
By writing new global CSS
By removing the config file
By using inline styles only

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.

Correct Answer: By extending the theme configuration

Example Code

theme: { extend: { colors: { brand: '#2563EB' } } }

140. Which build process ensures Tailwind CSS performs efficiently in large apps?

Difficulty: MediumType: MCQTopic: Perf

PostCSS with purge and minify steps
Manual class writing
Inlining all utilities
Disabling purge feature

Using PostCSS with purge and minify ensures only used styles remain in production, reducing file size and boosting loading speed.

Correct Answer: PostCSS with purge and minify steps

141. How do you make images responsive using Tailwind in Next.js?

Difficulty: MediumType: MCQTopic: Integration

Add responsive width and height utilities
Use CSS flexbox only
Use inline image tags
Use background-size utilities

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.

Correct Answer: Add responsive width and height utilities

Example Code

class='w-full sm:w-1/2 rounded-lg'

142. How can you manage long Tailwind class names in React components?

Difficulty: MediumType: SubjectiveTopic: Integration

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.

143. How does Tailwind help large teams scale UI design systems?

Difficulty: MediumType: SubjectiveTopic: Perf

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.

144. Why is keeping theme values centralized a best practice?

Difficulty: MediumType: SubjectiveTopic: Components

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.

145. What are ways to optimize Tailwind for performance in production?

Difficulty: MediumType: SubjectiveTopic: Perf

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.

146. How can Tailwind CSS be integrated into a Vue.js project?

Difficulty: MediumType: SubjectiveTopic: Integration

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.

147. What are some common mistakes developers make when using Tailwind CSS?

Difficulty: HardType: SubjectiveTopic: Practices

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.

148. Which class applies Bootstrap 5 styling to text inputs and textareas?

Difficulty: EasyType: MCQTopic: Forms

.input
.form-input
.form-control
.control-input

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.

Correct Answer: .form-control

Example Code

<input type='text' class='form-control' placeholder='Your name'>

149. Which class styles native select elements in Bootstrap 5?

Difficulty: EasyType: MCQTopic: Forms

.form-control
.form-select
.select-control
.select

Apply the class .form-select to a select element. It adds proper height, padding, and a styled arrow that matches the Bootstrap theme.

Correct Answer: .form-select

Example Code

<select class='form-select'><option>One</option></select>

150. Which wrapper class is used for checkboxes and radios?

Difficulty: EasyType: MCQTopic: Forms

.check
.form-check
.form-choice
.input-check

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.

Correct Answer: .form-check

Example Code

<div class='form-check'>
 <input class='form-check-input' type='checkbox' id='a1'>
 <label class='form-check-label' for='a1'>Accept</label>
</div>

151. How do you render a checkbox as a toggle switch?

Difficulty: MediumType: MCQTopic: Forms

.form-toggle on input
.switch class on label
.form-check .form-switch
.toggle-control on div

Add the class .form-switch to a .form-check wrapper. Keep the input as a checkbox. Bootstrap will automatically style it to look like a toggle switch.

Correct Answer: .form-check .form-switch

Example Code

<div class='form-check form-switch'>
 <input class='form-check-input' type='checkbox' id='notify'>
 <label class='form-check-label' for='notify'>Notifications</label>
</div>

152. Which wrapper enables floating labels around inputs?

Difficulty: MediumType: MCQTopic: Forms

.form-floating
.floating-label
.label-float
.float-group

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.

Correct Answer: .form-floating

Example Code

<div class='form-floating'>
 <input type='email' class='form-control' id='mail' placeholder='name@example.com'>
 <label for='mail'>Email address</label>
</div>

153. Which element is used to add prefix or suffix text in an input group?

Difficulty: MediumType: MCQTopic: Forms

.input-addon
.input-prepend
.input-group-text
.group-helper

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.

Correct Answer: .input-group-text

Example Code

<div class='input-group'>
 <span class='input-group-text'>₹</span>
 <input class='form-control' type='number'>
</div>

154. Which class marks an input as valid in Bootstrap 5 validation styles?

Difficulty: MediumType: MCQTopic: Forms

.is-valid
.valid
.has-valid
.form-valid

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.

Correct Answer: .is-valid

Example Code

<input class='form-control is-valid' value='ok'>

155. Which class shows error text only when the input is invalid and the form was validated?

Difficulty: MediumType: MCQTopic: Forms

.form-error
.invalid-text
.invalid-feedback
.feedback-error

Use .invalid-feedback for error text and .valid-feedback for success messages. These stay hidden until the input becomes invalid or valid within a validated form.

Correct Answer: .invalid-feedback

Example Code

<div class='invalid-feedback'>Please enter a valid email.</div>

156. Which class renders plain, uneditable text that aligns with form controls?

Difficulty: EasyType: MCQTopic: Forms

.form-static
.form-control-plain
.form-control-plaintext
.form-plaintext

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.

Correct Answer: .form-control-plaintext

Example Code

<input type='text' readonly class='form-control-plaintext' value='ID-1024'>

157. What is the recommended way to make horizontal form layouts in Bootstrap 5?

Difficulty: MediumType: MCQTopic: Forms

Use .form-row
Use table layout
Use the grid with .row and .col
Use inline-blocks

Bootstrap 5 no longer includes .form-row. To build horizontal forms, use the standard grid with .row and .col classes so labels and controls align responsively.

Correct Answer: Use the grid with .row and .col

Example Code

<div class='row g-3'>
 <label class='col-sm-3 col-form-label'>Email</label>
 <div class='col-sm-9'><input class='form-control' type='email'></div>
</div>

158. Why do we add the novalidate attribute and how do we trigger custom validation feedback?

Difficulty: MediumType: SubjectiveTopic: Forms

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.

Example Code

const form = document.querySelector('form');
form.addEventListener('submit', e => {
 if (!form.checkValidity()) { e.preventDefault(); }
 form.classList.add('was-validated');
});

159. How should labels and help text be connected for accessibility?

Difficulty: EasyType: SubjectiveTopic: Forms

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.

Example Code

<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>

160. When should you use floating labels and what are two common pitfalls?

Difficulty: MediumType: SubjectiveTopic: Forms

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.

Example Code

<div class='form-floating'>
 <input id='emailF' type='email' class='form-control' placeholder=' '>
 <label for='emailF'>Email</label>
</div>

161. Give practical uses of input groups and how to keep them accessible.

Difficulty: MediumType: SubjectiveTopic: Forms

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.

Example Code

<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>

162. How do you style file uploads and provide clear feedback to users?

Difficulty: MediumType: SubjectiveTopic: Forms

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'.

Example Code

<input class='form-control' type='file' id='resume' accept='.pdf,.docx'>
<div class='form-text'>PDF or DOCX, max two megabytes.</div>

163. How do you build a compact inline form that still works on mobile?

Difficulty: EasyType: SubjectiveTopic: Forms

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.

Example Code

<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>

164. Explain a simple pattern to show real time validation as the user types.

Difficulty: MediumType: SubjectiveTopic: Forms

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.

Example Code

const email = document.querySelector('#em');
email.addEventListener('input', () => {
 email.classList.toggle('is-valid', email.checkValidity());
 email.classList.toggle('is-invalid', !email.checkValidity());
});

Related Subjects

HTML CSS Javascript Typescript SQL & Databases React

Continue your preparation

Browse more Tailwind CSS questions, explore related subjects, or practice full interview sets to strengthen your preparation.

Tailwind CSS subject page•All subjects

<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>

<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>

const email = document.querySelector('#em'); email.addEventListener('input', () => { email.classList.toggle('is-valid', email.checkValidity()); email.classList.toggle('is-invalid', !email.checkValidity()); });