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.

Practice

1. What is the main purpose of extracting critical CSS in a Tailwind project?

easy

A. To increase the size of the CSS file

B. To add more colors to the website

C. To disable all animations on the page

D. To load only the CSS needed for the visible part of the page first

Solution

1. Step 1: Understand what critical CSS means

   Critical CSS means the styles needed to show the visible part of the page immediately.

2. Step 2: Identify the benefit of extracting critical CSS

   Extracting critical CSS helps load only these important styles first, speeding up page load.

3. Final Answer:

   To load only the CSS needed for the visible part of the page first -> Option D

4. Quick Check:

   Critical CSS = Load visible styles first [OK]

Hint: Critical CSS loads visible styles first to speed up page [OK]

Common Mistakes:

• Thinking it adds more styles instead of reducing initial load
• Confusing critical CSS with full CSS bundle
• Believing it disables animations

2. Which Tailwind CLI flag is used to extract critical CSS automatically?

easy

A. --extract-critical

B. --critical-css

C. --extract-css

D. --critical-extract

Solution

1. Step 1: Recall the Tailwind CLI flag for critical CSS extraction

   The correct flag is --extract-critical as per Tailwind documentation.

2. Step 2: Compare with other options

   Other options are incorrect or do not exist in Tailwind CLI.

3. Final Answer:

   --extract-critical -> Option A

4. Quick Check:

   Flag for critical CSS = --extract-critical [OK]

Hint: Remember the exact flag: --extract-critical [OK]

Common Mistakes:

• Mixing flag words or order
• Using similar but invalid flags
• Forgetting the double dash prefix

3. Given this Tailwind CLI command:
tailwindcss -i input.css -o output.css --extract-critical
What will happen when you open the webpage using output.css?

medium

A. The CSS file will be empty

B. Only the CSS needed for the visible part loads first, improving speed

C. No CSS will load because the flag disables styles

D. The entire CSS loads at once, no speed improvement

Solution

1. Step 1: Understand the effect of --extract-critical flag

   This flag extracts and includes only critical CSS for initial load.

2. Step 2: Predict the webpage behavior

   The page loads faster because only needed styles for visible content are loaded first.

3. Final Answer:

   Only the CSS needed for the visible part loads first, improving speed -> Option B

4. Quick Check:

   --extract-critical improves load speed by loading visible styles first [OK]

Hint: Flag extracts visible styles first, speeding page load [OK]

Common Mistakes:

• Thinking the flag disables CSS
• Assuming full CSS loads immediately
• Believing CSS file becomes empty

4. You ran tailwindcss -i input.css -o output.css --extract-critical but the page still loads slowly. What could be a reason?

medium

A. You forgot to include the generated output.css in your HTML file

B. The flag --extract-critical disables all CSS animations

C. Tailwind CLI does not support critical CSS extraction

D. You need to add --fast-load flag instead

Solution

1. Step 1: Check if CSS file is linked in HTML

   If the generated CSS file is not included in the HTML, styles won't apply, causing slow or broken page.

2. Step 2: Verify other options

   Other options are incorrect: the flag does not disable animations, Tailwind supports extraction, and --fast-load is not a valid flag.

3. Final Answer:

   You forgot to include the generated output.css in your HTML file -> Option A

4. Quick Check:

   Missing CSS link = no styles applied [OK]

Hint: Always link generated CSS file in HTML to see styles [OK]

Common Mistakes:

• Assuming flag disables animations
• Thinking Tailwind lacks critical CSS support
• Using non-existent CLI flags

5. You want to optimize a large Tailwind project by extracting critical CSS only for the homepage visible content. Which approach is best?

hard

A. Manually copy visible styles into a separate CSS file without using Tailwind CLI flags

B. Include the entire Tailwind CSS file on all pages without extraction

C. Run Tailwind CLI with --extract-critical on homepage CSS and load it first, then lazy-load other styles

D. Disable Tailwind CSS and write all styles in plain CSS

Solution

1. Step 1: Use Tailwind CLI with --extract-critical for homepage

   This extracts only the CSS needed for visible homepage content, improving load speed.

2. Step 2: Load extracted CSS first and lazy-load others

   Loading critical CSS first ensures fast rendering; lazy-loading other styles avoids blocking.

3. Final Answer:

   Run Tailwind CLI with --extract-critical on homepage CSS and load it first, then lazy-load other styles -> Option C

4. Quick Check:

   Extract critical CSS + lazy load others = best optimization [OK]

Hint: Extract critical CSS for visible content, lazy-load rest [OK]

Common Mistakes:

• Loading full CSS without extraction
• Manually copying styles risking errors
• Disabling Tailwind CSS unnecessarily