0
0
Tailwindmarkup~5 mins

Extracting critical CSS in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Extracting critical CSS helps your webpage load faster by sending only the styles needed for the visible part first.

When you want your website to show content quickly on slow internet.
When you want to improve your website's speed score in tools like Google Lighthouse.
When your page has a lot of styles but only a small part is visible at first.
When you want to reduce the delay before users see styled content.
When you want to improve user experience by avoiding blank or unstyled pages.
Syntax
Tailwind
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify --content './src/**/*.{html,js}' --extract-critical
Use the --extract-critical flag to generate critical CSS automatically.
Make sure your content paths include all files that use Tailwind classes.
Examples
This command builds your CSS, minifies it, and extracts critical CSS for all HTML files in src.
Tailwind
npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify --content './src/**/*.html' --extract-critical
Extracts critical CSS for React components inside the app folder.
Tailwind
npx tailwindcss -i ./input.css -o ./output.css --content './app/**/*.{js,jsx}' --extract-critical
Sample Program

This simple webpage uses Tailwind CSS classes. By extracting critical CSS, the styles for the header and main content load quickly, improving the page's initial render speed.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Critical CSS Example</title>
  <link rel="stylesheet" href="./dist/output.css" />
</head>
<body class="bg-gray-100">
  <header class="bg-blue-600 text-white p-4">
    <h1 class="text-2xl font-bold">Welcome to My Site</h1>
  </header>
  <main class="p-6">
    <p class="text-gray-700">This is the main content area.</p>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Extracting critical CSS works best when your HTML and JS files are correctly listed in the content option.

Critical CSS only includes styles needed for above-the-fold content, so styles for content below the fold load later.

Use browser DevTools to check which CSS is loaded first and verify faster page rendering.

Summary

Extracting critical CSS sends only needed styles for the visible part of the page first.

This improves page load speed and user experience.

Use the --extract-critical flag with Tailwind CLI to generate critical CSS automatically.