Wipro · Tailwind CSS

Wipro Tailwind CSS interview questions

Practice Tailwind CSS questions specifically asked in Wipro interviews – ideal for online test preparation, technical rounds and final HR discussions.

Company: WiproSubject: Tailwind CSS75 questions in this page

Quick overview

Questions

Tagged for this company + subject

Company

Wipro

View company-wise questions

Subject

Tailwind CSS

Explore topic-wise practice

Wipro · Tailwind CSS questions (75)

Go through each question and its explanation. Use this page for targeted revision just before your Wipro Tailwind CSS round.

Back to Wipro page•View all Tailwind CSS questions

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

Difficulty: MediumType: MCQTopic: Perf

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

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

Difficulty: EasyType: MCQ

Continue your preparation

For complete preparation, combine this company + subject page with full company-wise practice and subject-wise practice. You can also explore other companies and topics from the links below.

Quick navigation:Wipro company page•Tailwind CSS subject page•All companies•All subjects

Master Interviews Anywhere, Anytime

Wipro Tailwind CSS interview questions

Quick overview

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

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

Continue your preparation

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

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

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

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

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

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

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

10. Which utility converts text to uppercase?

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

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

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

14. How does Tailwind remove unused styles in production?

15. Which command installs Tailwind CSS via npm?

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

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

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

19. What does JIT mode do in Tailwind?

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

21. What is the purpose of Tailwind plugins?

22. Which class sets the Flexbox direction to column?

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

24. Which class enables CSS Grid layout in Tailwind?

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

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

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

28. Which class makes text bold in Tailwind?

29. Which class gives an element a red background?

30. Which utility adjusts line height in Tailwind?

31. Which class centers a block element horizontally?

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

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

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

35. Which class prevents background images from repeating?

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

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

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

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

40. Which class applies slightly rounded corners?

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

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

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

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

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

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

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

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

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

50. Which class targets a disabled button state?

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

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

53. Which variants style alternate table rows?

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

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

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

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

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

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

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

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

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

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

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

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

66. Which class adds deeper shadow for card elevation?

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

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

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

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

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

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

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

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

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

Master Interviews
Anywhere, Anytime