Extracting critical CSS in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

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

Why do developers extract critical CSS when using Tailwind CSS in their web projects?

A To load only the CSS needed for above-the-fold content, improving page load speed.

B To remove all unused CSS classes from the Tailwind library permanently.

C To convert Tailwind CSS classes into inline styles for every HTML element.

D To bundle all Tailwind CSS styles into a single large CSS file for caching.

💡 Hint

Think about what 'critical' means in the context of page loading.

Extracting critical CSS means isolating the styles needed to render the visible part of the page first. This helps the browser show content faster, improving user experience.

📝 Syntax

intermediate

Which Tailwind CSS configuration snippet correctly enables purging unused styles for production?

Select the correct Tailwind CSS config code that removes unused CSS classes during production builds.

Tailwind

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

A

module.exports = {
  purge: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
  plugins: [],
}

B

module.exports = {
  content: ['./src/**/*.{css,scss}'],
  theme: { extend: {} },
  plugins: [],
}

C

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: { extend: {} },
  plugins: [],
}

D

module.exports = {
  purge: false,
  theme: { extend: {} },
  plugins: [],
}

💡 Hint

Look for the modern property name used to specify files for purging.

In Tailwind CSS v3+, the content key replaces purge to specify files to scan for used classes. This enables removing unused styles.

❓ rendering

advanced

What will be the visible effect of extracting critical CSS on a slow network?

Imagine a webpage styled with Tailwind CSS where critical CSS is extracted and inlined in the HTML. What will the user see first on a slow network?

A The page shows a blank white screen until all CSS files finish loading.

B The entire page appears unstyled until the full CSS file downloads.

C Only text content appears with default browser styles, no colors or layout.

D The above-the-fold content styled correctly appears quickly, while other styles load later.

💡 Hint

Think about what 'critical CSS' means for initial rendering.

Inlining critical CSS means the browser can style the visible part of the page immediately, improving perceived load speed on slow connections.

❓ selector

advanced

Which CSS selector targets only the critical CSS classes extracted for above-the-fold content?

Given that critical CSS classes are prefixed with critical-, which selector matches only those classes?

A [class^='critical-']

B .critical-

C [class*='critical']

D .critical *

💡 Hint

Look for a selector that matches class names starting with a specific string.

The attribute selector [class^='critical-'] matches elements whose class attribute starts exactly with 'critical-'.

❓ accessibility

expert

How does extracting critical CSS affect accessibility during page load?

When critical CSS is extracted and inlined, what accessibility benefit does this provide to users relying on screen readers or keyboard navigation?

A It hides non-critical content from screen readers until full CSS loads.

B It ensures content is visually styled and structured immediately, helping screen readers interpret layout faster.

C It disables all animations to avoid distractions for keyboard users.

D It automatically adds ARIA labels to all elements during initial load.

💡 Hint

Think about how faster visual rendering helps assistive technologies.

Critical CSS makes the page visually complete faster, so screen readers and keyboard users get a meaningful layout and content structure sooner.