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

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.

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

beginner

What does the Tailwind class 'text-center' do?

The 'text-center' class centers the text horizontally inside its container.

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.

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.

Which Tailwind class centers text horizontally?

A text-justify

B text-left

C text-center

D text-right

The 'text-center' class centers text horizontally inside its container.

What does the Tailwind class 'p-4' do?

A Adds padding of 1rem on all sides

B Adds margin of 4px on all sides

C Adds padding of 4px on all sides

D Adds margin of 1rem on all sides

'p-4' adds padding of 1rem (16px) on all sides of the element.

Which HTML element is best for wrapping the main content of a page for accessibility?

A div

B main

C span

D footer

The <main> element is used to wrap the main content and helps screen readers understand page structure.

Why do you need the viewport meta tag in your HTML when using Tailwind?

A To link external CSS files

B To add custom fonts

C To improve SEO ranking

D To enable responsive design on mobile devices

The viewport meta tag makes sure the page scales correctly on different screen sizes, enabling responsive design.

Which Tailwind class changes text color to blue?

A text-blue-600

B text-red-500

C text-green-600

D text-yellow-400

'text-blue-600' applies a medium blue color to the text.

Describe how to create a simple 'Hello World' component using Tailwind CSS.

Think about how you add style directly in HTML with Tailwind classes.

Explain why accessibility and responsive design are important when building your first Tailwind component.

Consider users with different needs and devices.