Tailwind CSS Interview Questions and Answers

Tailwind CSS is a utility-first CSS framework that makes it easy to build custom designs without writing custom CSS. It allows you to apply individual utility classes directly in your HTML, which helps create fully customized layouts with minimal effort.

• Tailwind provides many utility classes for building responsive and custom designs.
• You can easily customize the framework to suit your needs via its configuration file.
• Tailwind helps build seamless mobile-first and responsive designs.
• Tailwind CSS has a feature that removes any unused CSS, improving performance.

Here, we’ve compiled the Top 60+ Tailwind CSS interview questions and answers, covering essential concepts like utility classes, responsive design, customization, and purging unused styles. Whether you're a beginner or a professional with 2-10 years of experience, these questions will help you confidently ace your next Tailwind CSS interview.

Basic level Interview Questions

1. Why do we use Tailwind CSS?

Tailwind CSS is used to design and style web pages fast and Responsive. Rapid Development, Highly Customizable, Reduced CSS File Size, Great Documentation, and Community Support are the main reasons for using Tailwind CSS.

2. Explain the concept of utility-first in Tailwind CSS

• Tailwind CSS is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in the traditional approach.
• This approach prioritizes simplicity, rapid development, and a modular way of applying styles.

3. How to set up the Tailwind CSS in a project?

There are two ways to use the Tailwind CSS we can install them on our server or we can use the CDN link as well.

Method 1: Using Tailwind via CDN

<link href=”https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css%E2%80%9D rel=”stylesheet”>

Method 2: Install Tailwind via npm

npm init -y
npm install tailwindcss

Use the @tailwind directive to inject Tailwind’s base, components, and utility styles into your CSS file.

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

This is used to create a config file to customize the designs. It is an optional step.

npx tailwindcss init

This command is used to compile style.css is the file that has to be compiled and output.css is the file on which it has to be compiled. If the file output.css is not created earlier then it will automatically be created.

npx tailwindcss build styles.css -o output.css

4. Is Tailwind CSS open-source (FREE to use)?

Tailwind CSS is an open-source project, available for free usage and utility-first CSS framework that provides responsiveness.

5. What is Drop Shadow in Tailwind CSS ?

The Drop Shadow class is used in Tailwind CSS to apply a filter to the image for setting the shadow of the image. There are various utility classes applied including drop-shadow-sm, drop-shadow, drop-shadow-md, drop-shadow-lg, drop-shadow-xl, drop-shadow-2xl and drop-shadow-none.

6. What is the primary purpose of the container class in Tailwind CSS?

• In Tailwind CSS, a container offers responsive layout, it is used to fix the max-width of an element to match the min-width of the breakpoint.
• To center the container, we use mx-auto utility class.

7. How to make text bold in Tailwind CSS?

For achieving the bold text we can easily add utility class font-bold.

8. How to center both horizontally and vertically?

Use self-center to align an item vertically and mx-auto for horizontal centering in Tailwind CSS.

9. How to define horizontal spacing and vertical spacing between elements with Tailwind CSS?

The horizontal and vertical spacing can easily achieved with Tailwind CSS with various utility classes including space-x-{n} for horizontal Spacing and space-y-{n} for vertical Spacing.

<div class="flex space-x-4">...
</div><div class="space-y-4">...</div>

Note: The utility classes mentioned above are applied to the child elements.

10. How to use CSS Grid with Tailwind CSS?

Tailwind CSS makes the concept of grid CSS Grid simple for creating complex grid structure. With the help of various utility classes defined in the tailwind CSS we can easily achieve the grid layout. The utility class .grid is used to create grid container.

<div class="grid">...</div>

• For defining the rows and columns use the utility classes "grid-cols-{n}" and "grid-rows-{n}".
• For defining the gap between grid items use the utility classes gap-{n}, col-gap-{n}, and row-gap-{n}.
• For defining the position and size of grid items use the utility classes col-span-{n}, row-span-{n}, col-start-{n}, col-end-{n}, row-start-{n}, and row-end-{n}.

11. How to apply Rotate property to the elements with Tailwind CSS?

Tailwind CSS offers different CSS utility classes for rotate the elements clock-wise as well as anticlock-wise.

• Clockwise Rotation: For clockwise rotation we have utility classes rotate-0, rotate-1, rotate-2, rotate-3, rotate-6, rotate-12, rotate-45, rotate-90 and rotate-180.
• Anti-Clockwise Rotation: For anti-clockwise rotation we have utility classes -rotate-0, -rotate-1, -rotate-2, -rotate-3, -rotate-6, -rotate-12, -rotate-45, -rotate-90 and -rotate-180.

Syntax

<element class="rotate-{degree}">...</element>

Note: rotate-0 defines no rotation

12. How to apply border collapse property to the elements with Tailwind CSS?

Tailwind CSS Border Collapse class is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not.

<element class="border-collapse">...</element>

13. How to align form elements to center using Tailwind CSS ?

For achieving aligniment form elements to center, Tailwind CSS uses justify-center and items-center property which is an alternative to the flex-property in CSS. Other flex properties like flex-col, justify-center, items-center are use for alignment purposes.

<div class="flex flex-col justify-center items-center"> ....</div>

14. How can you use Tailwind CSS to position two elements to the left and right?

You can position elements to the left and right in Tailwind CSS using either the flex or flow-root classes. The flow-root class efficiently clears floated content within a container, ensuring proper layout structure. Simultaneously, the position class enables precise control over the placement of positioned elements, offering flexibility in alignment.

15. How to add new colors to tailwind-css and keep the originals ones?

• You can effortlessly incorporate additional colors into Tailwind CSS while keep the original ones through customization configuration.
• Simply, configure your colors within the "colors" key found in the theme section of your tailwind.config.js file.

16. How do you apply a shadow effect to an element in Tailwind CSS?

Tailwind CSS offers utilities like shadow, shadow-lg, shadow-xl, etc., to apply shadows.

<div class="bg-white p-4 shadow-lg">Box with Shadow</div>

17. How to make an element fill its parent container in Tailwind CSS?

Use the w-full utility class to make the element take 100% of the width of its parent.

<div class="w-full bg-blue-500 p-4">Full-width element</div>

18. How does it differ from traditional CSS frameworks like Bootstrap?

Unlike traditional frameworks like Bootstrap, which come with predefined components, Tailwind focuses on utility classes to create reusable components. This approach allows for more flexibility and customizability.

19. What is the purpose of the @apply directive in Tailwind CSS?

The @apply directive allows you to group multiple utility classes into one custom CSS rule. This helps avoid repetitive code and promotes reusability of common style patterns. It is useful when a group of utility classes needs to be applied to multiple elements.

20. What are the benefits and its limitations of Tailwind CSS ?

Tailwind CSS has many advantages includes, minimum lines of Code in CSS file, easily customizable for design a components, website responsive. Tailwind CSS offers many features, but it does have some limitations. The major drawbacks frequently observed are illustrated in the table below.

Intermediate Level interview questions

21. How does Tailwind CSS handle flex direction in its utility classes?

Tailwind CSS offers various flex directions including flex-row, flex-row-reverse, flex-col, and flex-col-reverse. To achieve the flex-direction properties, you have to include the flex class in your element before the flex-direction class.

<element class="flex flex-row"> Contents... </element>

22. How to manage order property in Tailwind CSS utility classes?

By using the 'order' class in Tailwind CSS, we can arrange the flex and grid items according to our requirements. This class is utilized to display flex and grid items in an order different from their appearance in the DOM. The classes are order-1, order-2, order-3, order-4, order-5, order-6, order-7, order-8, order-9, order-10, order-11, order-12, order-first, order-last, order-none.

<element order- number | string >

24. Can we change the base font-family in Tailwind config?

Yes, we can change the base font-family in Tailwind config. To adjust the main font style in Tailwind CSS, you can modify it by making changes in the "theme" part of your configuration file (tailwind.config.js). Just open that file, find the theme section, and add or update the fontFamily setting.

25. Do Tailwind CSS Classes Override Previous Classes?

Tailwind CSS is designed to be a low-level utility-first framework, which means that classes are not automatically overridden by default. This make the styling process for form elements simple and allowing easy customization with utilities.

26. How to create a form with Tailwind CSS?

Tailwind CSS, offers Tailwind forms as plugins that provide a foundational reset for form styles. We can also use utility classes to make a form with Tailwind CSS, use the easy-to-apply classes for backgrounds, borders, shadows, etc. Start by creating the form element and use the space-y-{n} class to add vertical spacing between the form controls.

27. Does Tailwind CSS provide overscroll behavior customization?

Yes, Tailwing CSS provide several Overscroll Behavior classes these. The syntax provide is an example hoe other can be used in this way

<element class="overscroll-auto">...</element>

The below table illustrates the various Overscroll Behavior class with their description.

28. How does Tailwind CSS handle font families?

The Tailwind CSS class, an alternative to CSS font-family, accepts multiple font names in a single class, covering various properties and allowing fallback fonts for browser compatibility.

Syntax

<element class="font-sans">...</element>

Font family classes

• font-sans
• font-serif
• font-mono

29. How can you use Tailwind CSS to position two elements to the left and right?

You can position elements to the left and right in Tailwind CSS using either the flex or flow-root classes. The flow-root class efficiently clears floated content within a container, ensuring proper layout structure.

30. How to add new colors to tailwind-css and keep the originals ones?

• You can effortlessly incorporate additional colors into Tailwind CSS while keep the original ones through customation configuration.
• Simply, configure your colors within the "colors" key found in the theme section of your tailwind.config.js file.

31. How to use CSS Grid with Tailwind CSS?

Tailwind CSS makes the concept of grid CSS Grid simple for creating complex grid structure. With the help of various utility classes defined in the tailwind CSS we can easily achieve the grid layout. The utility class .grid is used to create grid container.

Syntax

<div class="grid">...</div>

• For defining the rows and columns use the utility classes "grid-cols-{n}" and "grid-rows-{n}".
• For defining the gap between grid items use the utility classes gap-{n}, col-gap-{n}, and row-gap-{n}.
• For defining the position and size of grid items use the utility classes col-span-{n}, row-span-{n}, col-start-{n}, col-end-{n}, row-start-{n}, and row-end-{n}.

32. How can Tailwind CSS be utilized to implement box shadows effectively?

This Tailwind CSS class makes it easy to control the box-shadow of an element by offering various options, similar to the CSS box-shadow properties.

Syntax:

<element class="shadow-{shadow-depth}">...</element>

The below table illustrates various Box Shadow classes with their description.

33. How does Tailwind CSS handle opacity?

Tailwind CSS controls opacity using utility classes like opacity-0 (fully transparent), opacity-50 (50% opacity), and opacity-100 (fully opaque). You can adjust background, text, and border opacity with classes like bg-opacity-50, text-opacity-75, and border-opacity-25.

It also supports hover and focus states (e.g., hover:opacity-75). For more control, custom opacity values can be defined in tailwind.config.js.

34. How to use responsive variants in Tailwind CSS?

Tailwind CSS provide different Default breakpoints these are illustrated in the table. With the help of these we can make website responsive. Also, we can customize breakpoints in Tailwind CSS and override the default breakpoints.

35. How to purge unused CSS in production using Tailwind CSS?

Use Tailwind’s purge feature to remove unused CSS when building for production.

36. How does Tailwind CSS handle theming and customization of colors or fonts?

Tailwind CSS uses a configuration file (tailwind.config.js) where you can extend or override the default theme. You can define custom colors, fonts, and other design tokens in the theme section, which Tailwind will then use throughout your project.

37. What is the purpose of the hover: pseudo-class in Tailwind CSS?

The hover: pseudo-class in Tailwind CSS allows you to define styles that should be applied when an element is hovered over. This is part of Tailwind's state-based styling system, which includes other pseudo-classes like focus:, active:, etc.

38. What is the significance of the container class in Tailwind CSS?

• The container class in Tailwind CSS centers the content and applies responsive padding on both sides.
• It helps maintain a consistent layout across various screen sizes by setting a maximum width for the layout while ensuring it adjusts fluidly on smaller screens.

39. How to implement dark mode using Tailwind CSS?

Use the dark: variant to apply styles when dark mode is enabled, or enable it globally using class or media.

<div class="dark:bg-gray-800 bg-white">Dark Mode</div>

40. How to make a container responsive and center its content with Tailwind CSS?

Use max-w-{size}, mx-auto for centering, and lg: for responsiveness.

<div class="max-w-screen-lg mx-auto p-4">Responsive Centered Container</div>

Advanced Level interview questions

41. How to use CSS animations with Tailwind CSS?

This Tailwind CSS class allows you to easily animate elements using CSS animations by providing a range of values and covering all necessary properties.

Syntax:

<element class="animate-{animation_name}">...</element>

The table below shows the different utility classes with their description.

42. How does Tailwind CSS differ from other CSS frameworks?

Tailwind CSSoffers various differences in the below table the key differences are defined.

43. How to install Tailwind CSS custom forms?

Use the given command to effortlessly install Tailwind CSS Custom Forms, enhancing form styling and customization in your project.

npm install @tailwindcss/custom-forms - - save-dev

44. How to download Tailwind CSS Typography?

We can download Tailwind CSS Typography using the provided command for easy integration of pre-styled typography in your project.

npm install @tailwindss/typography

Output:

45. Why are CSS classes missing in production when using Tailwind and Next.js ?

When we use Tailwind and Next.js together, they can sometimes cause issues. One common issue is missing CSS classes in production, where some Tailwind classes are not included in the final CSS file, that leads to inconsistent website styles across environments.

Possible Causes of Missing CSS Classes

• PurgeCSS: PurgeCSS is a tool that removes unused CSS classes from the final CSS file to reduce its size. By default, Next.js uses PurgeCSS to optimize the production build,
• CSS Modules: Next.js supports CSS Modules, which allows developers to scope CSS styles to individual components. This can cause issues with Tailwind classes, as they are not scoped to individual components and may not be available in all files.

Fixing Missing CSS Classes

• Enable JIT Mode: Just-in-Time (JIT) mode is a new feature to enable JIT mode, add the mode property to your tailwind.config.js file and set its value to “jit”.
• Use the @layer Directive: The @layer directive is a new feature in Tailwind 2.1+ that allows you to define classes in a specific layer, ensuring that they are available in all files.

46. How to create a fixed or sticky header with Tailwind CSS?

To create a fixed or sticky header using Tailwind CSS, utilize the defined utility classes for fixed and sticky positions. Specify the desired position by applying the top-0 and inset-x-0 utility classes.

Syntax

<header class="fixed top-0 inset-x-0">...</header>
<header class="sticky top-0 inset-x-0">...</header>

Note: The parent element should have the relative position defined using the utility class 'relative'.

47. How to Achieve Pixel-Perfect Design with Tailwind CSS Coding?

Tailwind CSS is a widely used CSS framework that makes it easy for developers to create accurate and seamless designs quickly and efficiently. There are two ways to achieve pixel-perfect designs with Tailwind CSS, one is by using specific values, and the other is by custom utilities.

Using arbitrary values: Tailwind CSS offers to use arbitrary values for properties like width, height, and font-size. We can get the pixel-perfect designs without defining custom utilities.

Syntax

<div class="w-[250px]"> ... </div>

Using custom utilities: We can also create the custom utilities for pixel-perfect designs.

Syntax

@layer utilities { 
 .h - 100 {
 height: 100px;
 }
}

48. Explain Letter Spacing in Tailwind CSS?

The Letter Spacing in Tailwind CSS is the alternative to the CSS letter-spacing property. This class is defined to control the spacing between text characters, adjusting the space between them in a text.

Syntax

<element class="tracking-{size}">...</element>

Table below illustrates the various letter spacing utility classes along with their description.

49. How to create a Card component using Tailwind CSS?

Tailwind CSS makes small utilities that come with clear choices, making it easy to directly add existing styles to your HTML code.

The table below shows a descriptive glance to the various utilities that helps in making Card component.

50. Can we use both Tailwind CSS and Bootstrap at the same time?

We can use both the CSS frameworks together but it may occur conflict and is not recommended. For example few classes will contradict with each other like “container”, “clearfix”, etc.

51. How to Center an Image using Tailwind CSS ?

We can center an Image using Tailwind CSS with different ways.

• Tailwind CSS Flexbox Classes: Tailwind CSS provides various Flexbox Classes including flex, justify-center, and items-center.
• Tailwind CSS Position Classes: Tailwind CSS provides various Position Classes including relative, inset-0, and m-auto.

52. How to resize the elements with Tailwind CSS?

With the help of different resize tailwind utility classes we can easily resize element according to user requirements.

• resize-none: Prevent an element from being resizable.
• resize-y: Make an element vertically resizable.
• resize-x: Make an element horizontally resizable.
• resize: Make an element horizontally and vertically resizable.

Syntax

<element class="pointer-{axis-boolean}">...</element>

53. Does Tailwind CSS provide overscroll behavior customization?

Yes, Tailwing CSS provide several Overscroll Behavior classes these. The syntax provide is an example hoe other can be used in this way.

<element class="overscroll-auto">...</element>

The below table illustrates the various Overscroll Behavior class with their description.

54. How can Tailwind CSS be utilized to implement box shadows effectively?

This Tailwind CSS class makes it easy to control the box-shadow of an element by offering various options, similar to the CSS box-shadow properties.

Syntax

<element class="shadow-{shadow-depth}">...</element>

The below table illustrates various Box Shadow classes with their description.

55. How does Tailwind CSS handle opacity, and what features does it provide for controlling the opacity of elements?

The Tailwind CSS opacity class provides many options to control element transparency. It covers all related properties and works similarly to the CSS opacity property, allowing values from 0 to 100 in increments of 5.

Syntax:

<element class="opacity-{number}">...</element>

Output:

56. How to create a flexbox layout with Tailwind CSS? 

The flexbox layout with Tailwind CSS can be achieved by defining various utility classes.

<div class="flex flex-row flex-wrap">...</div>

The below table give you a basic idea about the different flex utilities defined in the Tailwind CSS with their description.

Note: Use flex-grow and flex-shrink properties to the child elements.

57. How to style elements based on state (e.g., hover, focus) in Tailwind CSS?

The elements can be styled with variant utilities based on their state. The below is the syntax and table with description.

Syntax:

active:{property}
focus:{property}
hover: {property}

58. How to use responsive variants in Tailwind CSS?

Tailwind CSS provide different Default breakpoints these are illustrated in the table. With the help of these we can make website responsive. Also, we can customize breakpoints in Tailwind CSS and override the default breakpoints.

59. What is the purpose of the Tailwind CSS fill class?

This utility class contains various values in tailwind CSS in which all the properties are covered in class form. The utility class`fill-current` simplifies setting the fill color of an SVG to match the current text color, providing an effortless way to apply an element's fill color by combining it with an existing text color utility.

<svg class="fill-current">...</svg>

60. How to apply Cursor Effect with Tailwind CSS?

Tailwind CSS offers utility class that accepts lots of value in tailwind CSS. The below table illustrate different Cursor utility classes with their description.

<element class="cursor-{behaviour}">...</element>

61. How to apply Translate property to the elements with Tailwind CSS?

Tailwind CSS offers different CSS utility classes for translate the elements. This class is used to translating elements with transform.

The below table describe the different classes with their description.

Note: Values are depends the requirement, it can set as full percentage, or directly put the rem value.

62. Why and how the Transition Timing Function used in Tailwind CSS ?

The transition timing function class is used to specify the time an animation uses to change from one set of CSS transitions to another.

<element class="ease-{timing}">...</element>

The table below explains various Transition timing function classes.

Example: The example illustratehow the Transition Timing Function used in Tailwind CSS.

Output

63. How to use Gradient Color Stops to the elements?

The Tailwind CSS Gradient Color Stops class accepts more than one value in tailwind CSS

<element class="gradient-color-stops">...</element>

Note: The number start from 50, 100, 200, and so on up to 900.

Example: The below code explain well howTailwind CSS Gradient Color Stops used.

Output

👁 ut

64. How to make element Background with Opacity in Tailwind CSS?

Element can be full, semi or not visible by applying the opacity. It can easily be achieved using Tailwind CSS utility class.

<element class="bg-{opacity}">...</element>

Note: The number of the opacity can be changeable from 0 to 100 with the span of 5.

Output