Bird
Raised Fist0
Tailwindmarkup~5 mins

First Tailwind component (Hello World) - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Recall & Review
beginner
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that helps you style your web pages by applying small, reusable classes directly in your HTML.
Click to reveal answer
beginner
How do you create a simple 'Hello World' component using Tailwind CSS?
You write an HTML element like <div>Hello World</div> and add Tailwind classes for styling, for example: <div class="text-center text-blue-600 text-2xl p-4">Hello World</div>.
Click to reveal answer
beginner
What does the Tailwind class 'text-center' do?
The 'text-center' class centers the text horizontally inside its container.
Click to reveal answer
intermediate
Why is it important to include the viewport meta tag in your HTML when using Tailwind?
The viewport meta tag ensures your page scales correctly on different devices, making Tailwind's responsive classes work as expected.
Click to reveal answer
intermediate
How can you make your Tailwind 'Hello World' component accessible?
Use semantic HTML elements like <main> or <section>, ensure good color contrast, and add ARIA labels if needed for screen readers.
Click to reveal answer
Which Tailwind class centers text horizontally?
Atext-justify
Btext-left
Ctext-center
Dtext-right
What does the Tailwind class 'p-4' do?
AAdds padding of 1rem on all sides
BAdds margin of 4px on all sides
CAdds padding of 4px on all sides
DAdds margin of 1rem on all sides
Which HTML element is best for wrapping the main content of a page for accessibility?
Adiv
Bmain
Cspan
Dfooter
Why do you need the viewport meta tag in your HTML when using Tailwind?
ATo link external CSS files
BTo add custom fonts
CTo improve SEO ranking
DTo enable responsive design on mobile devices
Which Tailwind class changes text color to blue?
Atext-blue-600
Btext-red-500
Ctext-green-600
Dtext-yellow-400
Describe how to create a simple 'Hello World' component using Tailwind CSS.
Think about how you add style directly in HTML with Tailwind classes.
You got /4 concepts.
    Explain why accessibility and responsive design are important when building your first Tailwind component.
    Consider users with different needs and devices.
    You got /4 concepts.

      Practice

      (1/5)
      1. What does the Tailwind class text-center do to an element?
      easy
      A. Centers the text horizontally inside the element
      B. Makes the text bold
      C. Changes the text color to blue
      D. Adds padding around the text

      Solution

      1. Step 1: Understand the class name meaning

        The class text-center in Tailwind means text alignment is centered horizontally.

      2. Step 2: Compare with other options

        Other options describe different styles like bold or color, which are not related to text-center.

      3. Final Answer:

        Centers the text horizontally inside the element -> Option A

      4. Quick Check:

        text-center aligns text center [OK]
      Hint: Remember: text-center means horizontal text alignment [OK]
      Common Mistakes:
      • Confusing text-center with text color classes
      • Thinking it makes text bold
      • Assuming it adds spacing
      2. Which of the following is the correct way to add Tailwind classes to an HTML <h1> element to make the text blue and centered?
      easy
      A.

      Hello World

      B.

      Hello World

      C.

      Hello World

      D.

      Hello World

      Solution

      1. Step 1: Check Tailwind class syntax

        Tailwind uses classes like text-center and text-blue-600 exactly as written in <h1 class="text-center text-blue-600">Hello World</h1>.

      2. Step 2: Identify incorrect class names

        Options B, C, and D use invalid or non-existent Tailwind class names.

      3. Final Answer:

        <h1 class="text-center text-blue-600">Hello World</h1> -> Option B

      4. Quick Check:

        Correct Tailwind class names = <h1 class="text-center text-blue-600">Hello World</h1> [OK]
      Hint: Use official Tailwind class names exactly as documented [OK]
      Common Mistakes:
      • Mixing up class name order or spelling
      • Using non-Tailwind class names
      • Adding extra hyphens or missing parts
      3. What will be the visual result of this HTML code using Tailwind CDN?
      <h1 class="text-center text-red-500 font-bold">Hello World</h1>
      medium
      A. A left-aligned, normal weight, blue heading saying 'Hello World'
      B. A centered, italic, green heading saying 'Hello World'
      C. A centered, bold, red heading saying 'Hello World'
      D. A right-aligned, bold, black heading saying 'Hello World'

      Solution

      1. Step 1: Decode Tailwind classes

        text-center centers text, text-red-500 colors text red, font-bold makes text bold.

      2. Step 2: Match visual description

        A centered, bold, red heading saying 'Hello World' matches all these styles exactly.

      3. Final Answer:

        A centered, bold, red heading saying 'Hello World' -> Option C

      4. Quick Check:

        Classes = center + red + bold = A centered, bold, red heading saying 'Hello World' [OK]
      Hint: Match each class to its style meaning [OK]
      Common Mistakes:
      • Confusing color codes with other colors
      • Ignoring font weight class
      • Assuming default alignment
      4. Identify the error in this Tailwind HTML snippet:
      <h1 class="text-center text-blue600 font-bold">Hello World</h1>
      medium
      A. Missing dash in color class; should be text-blue-600
      B. text-center is not a valid Tailwind class
      C. font-bold should be font-heavy
      D. Class names must be in uppercase

      Solution

      1. Step 1: Check Tailwind color class format

        Tailwind color classes require a dash between color and number, e.g., text-blue-600.

      2. Step 2: Verify other classes

        text-center and font-bold are valid classes; uppercase is not required.

      3. Final Answer:

        Missing dash in color class; should be text-blue-600 -> Option A

      4. Quick Check:

        Color class format error = Missing dash in color class; should be text-blue-600 [OK]
      Hint: Check for dashes in color classes [OK]
      Common Mistakes:
      • Omitting dash in color classes
      • Thinking class names need uppercase
      • Replacing font-bold with wrong class
      5. You want to create a responsive heading that is centered and blue on small screens, but turns red and left-aligned on medium screens and larger using Tailwind. Which class set achieves this?
      hard
      A. text-center text-red-600 md:text-left md:text-blue-600
      B. text-left text-red-600 md:text-center md:text-blue-600
      C. text-center md:text-center text-blue-600 md:text-red-600
      D. text-center text-blue-600 md:text-left md:text-red-600

      Solution

      1. Step 1: Understand Tailwind responsive prefixes

        md: prefix applies styles at medium screen size and above.

      2. Step 2: Match desired styles

        Small screens: text-center text-blue-600. Medium+: md:text-left md:text-red-600.

      3. Step 3: Verify text-center text-blue-600 md:text-left md:text-red-600 matches this exactly

        text-center text-blue-600 md:text-left md:text-red-600 uses correct order and classes for the requirement.

      4. Final Answer:

        text-center text-blue-600 md:text-left md:text-red-600 -> Option D

      5. Quick Check:

        Responsive classes with md: prefix = text-center text-blue-600 md:text-left md:text-red-600 [OK]
      Hint: Use md: prefix for medium screen styles [OK]
      Common Mistakes:
      • Reversing small and medium screen classes
      • Missing md: prefix for medium styles
      • Using wrong color or alignment classes