Tailwindmarkup~30 mins

Extracting critical CSS in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Extracting Critical CSS with Tailwind

📖 Scenario: You are building a simple webpage that shows a welcome message and a button. To make the page load faster, you want to extract only the critical CSS needed for the above-the-fold content using Tailwind CSS.

🎯 Goal: Create a minimal HTML page styled with Tailwind CSS classes. Then configure Tailwind to extract only the critical CSS for the visible content.

📋 What You'll Learn

Create an HTML file with a <main> section containing a heading and a button.

Use Tailwind CSS utility classes for styling the heading and button.

Add a Tailwind configuration file with a content array that includes the HTML file path.

Configure Tailwind to generate only the CSS used in the HTML file (critical CSS).

💡 Why This Matters

🌍 Real World

Extracting critical CSS helps webpages load faster by sending only the styles needed for the visible part of the page first.

💼 Career

Web developers optimize site performance by configuring tools like Tailwind to generate minimal CSS, improving user experience and SEO.

Progress0 / 4 steps

Create the HTML structure with Tailwind classes

Create an HTML file named index.html with a <main> element. Inside <main>, add an <h1> with the text Welcome to Critical CSS and a <button> with the text Click Me. Use Tailwind classes text-3xl font-bold on the <h1> and bg-blue-500 text-white px-4 py-2 rounded on the <button>.

Tailwind

Need a hint?

Remember to use the exact Tailwind classes on the <h1> and <button> as specified.

Add Tailwind configuration with content paths

Create a tailwind.config.js file. Inside it, export a configuration object with a content array that includes the path "./index.html". This tells Tailwind which files to scan for class names.

Tailwind

module.exports = {
  content: [
    // Add the path to your HTML file here
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// Your code here

Need a hint?

Make sure the content array includes exactly "./index.html".

Build Tailwind CSS to extract critical styles

Create a CSS file named input.css with the content @tailwind base;, @tailwind components;, and @tailwind utilities; each on its own line. Then run the Tailwind CLI command npx tailwindcss -i ./input.css -o ./dist/output.css --minify to generate the critical CSS file.

Tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

# Your code here

Need a hint?

Write the three Tailwind directives exactly as shown, each on its own line.

Link the generated CSS and verify critical CSS extraction

Ensure your index.html file links to the generated CSS file at ./dist/output.css using a <link> tag inside the <head>. This completes the setup to use only the critical CSS for your page.

Tailwind




  
  
  Critical CSS Example
  


  
    Welcome to Critical CSS
    Click Me
  



# Your code here

Need a hint?

Make sure the <link> tag is inside the <head> and points to ./dist/output.css.