Tailwind installation and setup - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to install Tailwind CSS using npm.

Tailwind

npm install [1]

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

Atailwindcss

Bbootstrap

Cjquery

Dreact

Attempts:

3 left

💡 Hint

Common Mistakes

Using unrelated package names like bootstrap or jquery.

Forgetting to use npm before install.

To install Tailwind CSS, you use npm install tailwindcss. This command adds Tailwind to your project.

2fill in blank

medium

Complete the code to initialize Tailwind CSS configuration file.

Tailwind

npx tailwindcss [1]

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

Acreate

Bbuild

Cinit

D-o

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'create' instead of 'init'.

Confusing build commands with config initialization.

The command npx tailwindcss init creates a tailwind.config.js file to customize Tailwind.

3fill in blank

hard

Fix the error in the Tailwind CSS input file path in the build script.

Tailwind

"build-css": "tailwindcss -i [1] -o ./dist/output.css --watch"

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

A./src/styles.css

B./dist/styles.css

C./styles/output.css

D./public/index.html

Attempts:

3 left

💡 Hint

Common Mistakes

Using output or dist folder as input file.

Using HTML file as input.

The input file for Tailwind CSS build should be your source CSS file, usually in ./src/ folder, like ./src/styles.css.

4fill in blank

hard

Fill both blanks to add Tailwind directives in your CSS file.

Tailwind

@[1] base;
@[2] components;

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

Atailwind

Bimport

Capply

Duse

Attempts:

3 left

💡 Hint

Common Mistakes

Using '@import' or '@apply' instead of '@tailwind'.

Mixing different directives in these lines.

Tailwind CSS uses @tailwind base; and @tailwind components; directives to include its styles.

5fill in blank

hard

Fill all three blanks to configure Tailwind to scan your HTML and JS files.

Tailwind

module.exports = {
  content: ["./[1]/**/*.{html,[2]", "./[3]/**/*.{js}"]
};

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

Asrc

Bjs

Cpublic

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'css' folder for content scanning.

Mixing file extensions incorrectly.

Tailwind's content array tells it where to look for class names. Usually, src for HTML and JS, and public for JS files.