Tailwind CSS integration in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add Tailwind CSS to your Astro project by installing the correct package.

Astro

npm install [1]

Drag options to blanks, or click blank then click option'

Atailwindcss

Btailwind-astro

C@astrojs/tailwind

Dastrocss

Attempts:

3 left

💡 Hint

Common Mistakes

Installing only 'tailwindcss' without the Astro-specific integration.

Using unofficial or misspelled package names.

The official way to integrate Tailwind CSS with Astro is to install the @astrojs/tailwind integration package. This handles the setup including Tailwind CSS itself.

2fill in blank

medium

Complete the code to create the Tailwind config file using the CLI command.

Astro

npx tailwindcss init [1]

Drag options to blanks, or click blank then click option'

A-p

B--postcss

Ccreate

D-c

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the PostCSS flag and only creating tailwind.config.

Using invalid flags like '--config' or 'create'.

The command npx tailwindcss init -p creates both the tailwind.config.mjs and postcss.config.cjs files, which are required for Tailwind in Astro projects.

3fill in blank

hard

Fix the error in the Tailwind config file by completing the content paths array correctly.

Astro

export default {
  content: [[1]],
  theme: {
    extend: {},
  },
  plugins: [],
}

Drag options to blanks, or click blank then click option'

A'./public/**/*.{astro,html,js,jsx,ts,tsx}'

B'./node_modules/**/*.{astro,html,js,jsx,ts,tsx}'

C'./dist/**/*.{astro,html,js,jsx,ts,tsx}'

D'./src/**/*.{astro,html,js,jsx,ts,tsx}'

Attempts:

3 left

💡 Hint

Common Mistakes

Including folders like node_modules or dist which are not source files.

Missing file extensions in the glob pattern.

The content array should include the source files where Tailwind classes are used. Usually, this is the src folder with extensions like astro, html, js, jsx, ts, and tsx.

4fill in blank

hard

Complete the astro.config.mjs code to add the Tailwind integration.

Astro

import [1] from "[2]";

  integrations: [[1]()],

Drag options to blanks, or click blank then click option'

Atailwindcss

B@astrojs/tailwind

Ctailwind

Dastro-tailwind

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'tailwindcss' instead of the Astro integration package.

Incorrect variable name or package path.

Import the Tailwind integration conventionally as tailwind from "@astrojs/tailwind", then add tailwind() to the integrations array in astro.config.mjs.

5fill in blank

hard

Fill all three blanks to configure Tailwind in Astro's main CSS file with directives for base, components, and utilities.

Astro

@tailwind [1];
@tailwind [2];
@tailwind [3];

Drag options to blanks, or click blank then click option'

Abase

Bcomponents

Cutilities

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing the order of directives.

Using incorrect directive names like 'styles'.

Tailwind CSS requires three directives in your main CSS file: @tailwind base;, @tailwind components;, and @tailwind utilities; to include all parts of the framework.