Tailwind CSS Beginner Quiz
30 questions on TailwindCSS Basics.
Question 1: Which CSS design paradigm does Tailwind CSS follow?
- A. Semantic CSS
- B. Utility-First CSS β (correct answer)
- C. Inline Styling exclusively
- D. BEM Architecture
Explanation: Tailwind CSS is a utility-first CSS framework. Instead of writing custom class names (like .btn-primary), you build interfaces by combining low-level atomic classes (like px-4 py-2 bg-blue-500 rounded).
Question 2: Which class adds padding on all sides in Tailwind CSS?
- A. m-4
- B. p-4 β (correct answer)
- C. gap-4
- D. px-4
Explanation: In Tailwind CSS, padding classes start with p-. p-4 adds padding on all sides. px-4 adds padding on left and right only; py-4 adds padding on top and bottom only.
Question 3: What is default unit sizing scale increments used in Tailwind (e.g., what does 4 represent in w-4)?
- A. 4 pixels
- B. 1 rem (16 pixels) β (correct answer)
- C. 4 rem
- D. 4%
Explanation: Tailwind's numeric scale spacing increments evaluate to 0.25rem per unit. Therefore, 4 stands for 1rem (or 16px under default browser configurations).
Question 4: What will be the visual rendering of this HTML container?
``html
<div class="w-1/2 h-20 bg-blue-500"></div>
``
- A. A blue block spanning half the screen width and 80px high
- B. A blue block spanning 50% width and 5rem high β (correct answer)
- C. Compiler Error
- D. A blank transparent block
Explanation: w-1/2 represents 50% width. h-20 translates to 5rem (80 pixels) height. bg-blue-500 styles the background color with shade 500 blue.
Question 5: Which class adds margins on left and right sides only?
- A. my-4
- B. mx-4 β (correct answer)
- C. ml-4
- D. mr-4
Explanation: Margins are prefixed with m-. The suffix x maps to horizontal sides (left and right), so mx-4 adds horizontal margins. my-4 adds vertical (top/bottom) margins.
Question 6: Which responsive prefix is used in Tailwind CSS to target medium screens (768px and up)?
- A. sm:
- B. md: β (correct answer)
- C. lg:
- D. xl:
Explanation: Tailwind uses simple responsive utility prefixes: sm: is 640px+, md: is 768px+, lg: is 1024px+, and xl: is 1280px+.
Question 7: How do you apply a class only when the user hovers over an element in Tailwind CSS?
- A. hover-class
- B. hover:class β (correct answer)
- C. focus:class
- D. active:class
Explanation: Tailwind implements interactive state modifiers. Prepending a class with the hover: prefix applies that style strictly during cursor hover states.
Question 8: Which class is used to make a text bold in Tailwind CSS?
- A. text-bold
- B. font-bold β (correct answer)
- C. text-weight-bold
- D. font-black
Explanation: Font weight utilities are prefixed with font-. font-bold sets font-weight: 700. font-black is heavier (900).
Question 9: Which class applies CSS Flexbox layout to a div element?
- A. layout-flex
- B. flex β (correct answer)
- C. display-flex
- D. flexbox
Explanation: Adding the flex class applies display: flex to the container element, unlocking flex layout controls.
Question 10: What will be the output of this HTML snippet?
``html
<div class="flex flex-col md:flex-row">
<div>1</div>
<div>2</div>
</div>
``
- A. Rendered vertically on mobile screens, and horizontally on screens 768px wide and up β (correct answer)
- B. Rendered horizontally on mobile screens, vertically on desktop
- C. Compiler Error
- D. Renders grid cells
Explanation: Tailwind is mobile-first. flex-col stacks elements vertically. The responsive md:flex-row overrides it on medium/large screens to stack elements horizontally.
Question 11: Which class sets the font size of a text to extra large (20px / 1.25rem)?
- A. text-large
- B. text-xl β (correct answer)
- C. font-xl
- D. text-2xl
Explanation: Text sizing is prefixed with text-. text-xl equals 1.25rem. text-2xl equals 1.5rem (24px).
Question 12: How do you customize colors, breakpoints, or fonts inside a Tailwind CSS project?
- A. Modifying main CSS files
- B. Configuring variables inside the
tailwind.config.js file β (correct answer)
- C. Pre-processing stylesheets
- D. It is not customizable
Explanation: The tailwind.config.js configuration file contains a theme object where you can extend or override default colors, spacing, borders, and viewport screens.
Question 13: Which class is used to center elements inside a CSS Flexbox container along the main horizontal axis?
- A. align-center
- B. justify-center β (correct answer)
- C. items-center
- D. content-center
Explanation: justify-center applies justify-content: center to flex items along the main axis. items-center centers items along the cross-axis.
Question 14: Which class makes a border fully rounded (circle) in Tailwind CSS?
- A. rounded-circle
- B. rounded-full β (correct answer)
- C. border-rounded
- D. radius-full
Explanation: Border radius utilities are prefixed with rounded-. rounded-full applies a border-radius of 9999px, generating perfect circles or pill layouts.
Question 15: What is the purpose of the JIT (Just-in-Time) engine in modern Tailwind CSS v3+?
- A. Compiles CSS inside the browser
- B. Scans HTML/JS files to compile only the CSS classes that are actually used, eliminating unused styles and generating ultra-small builds β (correct answer)
- C. Compiles database tables
- D. Speeds up internet speeds
Explanation: Tailwind's compilation scans templates dynamically. It matches utilized classes and exports a compiled stylesheet of only referenced styles, often under 10KB.
Question 16: How do you set a custom spacing value that is not defined in Tailwind's default configuration (e.g. 17px padding)?
- A. Write inline standard HTML style
- B. Use arbitrary value notation:
p-[17px] β (correct answer)
- C. Modify tailwind library core files
- D. Use
p-17
Explanation: Tailwind supports arbitrary values using square brackets: class="p-[17px] bg-[#ff0000] w-[80vw]". This compiles custom values on-the-fly.
Question 17: Which CSS Grid utility generates a container with 3 equal columns?
- A. grid-cols-3 β (correct answer)
- B. grid-3
- C. grid cols-3
- D. display-grid-3
Explanation: Adding the grid class enables grid layout. grid-cols-3 sets grid-template-columns: repeat(3, minmax(0, 1fr)).
Question 18: Which class applies dark mode styles strictly when dark mode is active?
- A. dark-mode:bg-black
- B. dark:bg-black β (correct answer)
- C. mode-dark:bg-black
- D. color-dark:bg-black
Explanation: The dark: prefix enables styles exclusively under dark mode settings (controlled by CSS media query or a manual class toggle on <html>).
Question 19: Which class is used to set the border width to 2 pixels in Tailwind CSS?
- A. border-2px
- B. border-2 β (correct answer)
- C. border-w-2
- D. border-bold
Explanation: Border width classes are named border or border-{width}. border-2 sets a 2px border width. border defaults to 1px.
Question 20: What does the tracking-wide class do?
- A. Adds transition tracking speeds
- B. Increases letter-spacing (tracking) of text β (correct answer)
- C. Increases line-height (leading) of text
- D. Adds shadow paths
Explanation: In typography, letter-spacing is called tracking in Tailwind, controlled by tracking-wide, tracking-tight, etc. Line height is called leading (leading-loose).
Question 21: What is the difference between shadow-sm and shadow-lg?
- A.
shadow-sm is darker
- B.
shadow-sm applies a small box shadow; shadow-lg applies a large box shadow β (correct answer)
- C. They are identical
- D.
shadow-lg is for borders only
Explanation: Box shadow utilities follow default sizing names: shadow-sm (small), shadow (medium), shadow-md (medium-large), and shadow-lg (large).
Question 22: How do you transition a background color smoothly on hover using Tailwind CSS?
- A.
transition-colors duration-300 β (correct answer)
- B.
hover-transition
- C.
transition-all delay-300
- D.
animate-fade
Explanation: transition-colors defines which properties transition. duration-300 sets the transition duration to 300ms, creating a smooth visual hover effect.
Question 23: Which class prevents horizontal overflow of a layout from showing scrollbars, hiding content that spills outside?
- A. overflow-scroll
- B. overflow-hidden
- C. overflow-x-hidden β (correct answer)
- D. overflow-clip
Explanation: overflow-x-hidden restricts horizontal overflow strictly. overflow-hidden hides overflow on both horizontal and vertical axes.
Question 24: Which class is used to position an element absolutely within a relatively positioned parent?
- A. absolute β (correct answer)
- B. position-absolute
- C. pos-abs
- D. relative-abs
Explanation: The layout positioning classes match CSS values exactly: static, relative, absolute, fixed, and sticky.
Question 25: Which utility class is used to set the text color of an element to white in Tailwind CSS?
- A. color-white
- B. text-white β (correct answer)
- C. bg-white
- D. font-white
Explanation: Text colors are formatted as text-{color}-{shade}. For core solid colors, it defaults to text-white or text-black.
Question 26: What is the function of the @apply directive in Tailwind CSS?
- A. It compiles database migrations
- B. It injects Tailwind's utility classes directly inside custom CSS selectors inside your main stylesheet β (correct answer)
- C. It downloads plugins
- D. It activates dark mode
Explanation: The @apply directive lets you keep templates clean by merging utility groups into custom CSS classes: .btn { @apply px-4 py-2 rounded bg-blue-500 text-white; }.
Question 27: What will be the output of this Grid configuration?
``html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
``
- A. Renders 1 column on mobile, 2 columns on medium screens, and 4 columns on large desktop screens β (correct answer)
- B. Renders 4 columns everywhere
- C. Compiler Error
- D. Renders overlapping text blocks
Explanation: This is the standard mobile-first grid strategy. Mobile shows 1 column (grid-cols-1). Tablet increases columns to 2 (md:grid-cols-2), and desktop shifts to 4 columns (lg:grid-cols-4).
Question 28: Which class sets the line-height (leading) of an element to 1.5 (normal) in Tailwind?
- A. leading-normal β (correct answer)
- B. tracking-normal
- C. line-height-normal
- D. font-leading
Explanation: Line height classes are named leading-. leading-normal sets line height to 1.5, leading-relaxed sets it to 1.625, and leading-loose sets it to 2.
Question 29: How do you apply a focus ring border overlay when an input is selected?
- A. focus:ring-2 focus:ring-indigo-500 β (correct answer)
- B. click:border-indigo-500
- C. active:ring-2
- D. select:border-2
Explanation: The focus: state modifier applies styles when elements are focused (e.g. text inputs). Adding ring-2 with color ring-indigo-500 applies a beautiful glow outline.
Question 30: What is the difference between w-screen and w-full in Tailwind CSS?
- A. They are identical
- B.
w-screen sets width to 100vw (viewport width); w-full sets width to 100% (parent container width) β (correct answer)
- C.
w-screen is slower
- D.
w-full is for desktop only
Explanation: w-screen ignores parent structures, sizing to match the exact device screen viewport width. w-full respects parent containers, extending width to fill its parent container entirely.