Tailwind CSS integration in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that lets you style your web pages using small, reusable classes instead of writing custom CSS.

beginner

How do you add Tailwind CSS to an Astro project?

You install Tailwind CSS via npm, create a tailwind.config.cjs file, add Tailwind directives to your CSS, and configure Astro to use PostCSS for processing.

intermediate

What is the purpose of the @tailwind base;, @tailwind components;, and @tailwind utilities; directives?

These directives tell Tailwind to inject its base styles, component classes, and utility classes into your CSS file.

intermediate

Why is it important to configure the content array in tailwind.config.cjs?

The <code>content</code> array tells Tailwind which files to scan for class names. This helps Tailwind remove unused styles and keep the CSS file small.

beginner

How does Tailwind CSS support responsive design?

Tailwind uses special prefixes like sm:, md:, lg: to apply styles at different screen sizes, making it easy to build responsive layouts.

Which command installs Tailwind CSS in an Astro project?

A npm install -D tailwindcss postcss autoprefixer

B npm install astro-tailwind

C npm install tailwind-astro

D npm install -g tailwindcss

You install Tailwind CSS along with PostCSS and Autoprefixer as development dependencies using npm.

Where do you add Tailwind's CSS directives in an Astro project?

A In a global CSS file imported in the project

B Directly inside Astro component files

C In the tailwind.config.cjs file

D In the package.json file

Tailwind's directives like @tailwind base; are added in a CSS file that is imported globally.

What does the content field in tailwind.config.cjs specify?

A Browser compatibility settings

B Files to scan for Tailwind classes

C Tailwind version to use

D Output CSS file location

The content array lists files where Tailwind looks for class names to include in the final CSS.

Which prefix applies styles for medium screen sizes in Tailwind?

A sm:

B xs:

C lg:

D md:

The md: prefix targets medium screen sizes for responsive styling.

Why use Tailwind CSS in Astro projects?

A To replace JavaScript logic

B To write complex CSS animations only

C To quickly style components with utility classes

D To manage backend data

Tailwind helps style components fast using small utility classes without writing custom CSS.

Explain the steps to integrate Tailwind CSS into an Astro project.

Think about installation, configuration, and usage in Astro.

Describe how Tailwind CSS helps with responsive design in Astro projects.

Focus on how Tailwind classes change with screen sizes.