Extracting critical CSS in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to include Tailwind CSS in your HTML file.

Tailwind

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.0/dist/tailwind.min.css" rel="[1]">

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

Astylesheet

Bscript

Cstyle

Dlink

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'script' instead of 'stylesheet' for the rel attribute.

Omitting the rel attribute entirely.

The rel attribute should be set to stylesheet to link the Tailwind CSS file properly.

2fill in blank

medium

Complete the Tailwind config to enable purging unused CSS from the src folder.

Tailwind

module.exports = {
  content: ["[1]/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

Asrc

Bpublic

Cdist

Dassets

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong folder name like 'public' or 'dist'.

Forgetting to include the folder path.

The content array tells Tailwind where to look for class names to keep. Usually, your source files are in the src folder.

3fill in blank

hard

Fix the error in the Tailwind build script to generate the CSS file with purging.

Tailwind

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

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

Aassets

Bdist

Cpublic

Dsrc

Attempts:

3 left

💡 Hint

Common Mistakes

Using the output folder as input path.

Misspelling the folder name.

The input CSS file is usually inside the src folder, so the path should be ./src/input.css.

4fill in blank

hard

Fill both blanks to create a minimal Tailwind CSS file that imports base styles and components.

Tailwind

@tailwind [1];
@tailwind [2];
@tailwind utilities;

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

Abase

Bcomponents

Cutilities

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'styles' instead of 'components'.

Repeating 'utilities' twice.

The three main layers in Tailwind CSS are base, components, and utilities. Here, you import base and components first, then utilities.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that extracts critical CSS classes from a list of classes with length greater than 5.

Tailwind

critical_css = {cls: len(cls)[1] 2 for cls in classes if len(cls) [2] [3]

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

A**

B>

C5

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>' in the condition.

Using multiplication '*' instead of power '**'.

This comprehension squares the length of each class name (using ** 2) and filters only those with length greater than 5.