Tailwind CSS Academy · 课时

审查 CSS 输出

使用 PurgeCSS 报告和捆绑包分析器等工具，检查哪些 Tailwind 类进入了生产构建，以及它们进入的原因。

审查 CSS 输出 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Why Audit Your CSS Output

Even with Tailwind's JIT engine removing unused styles, your production CSS bundle can grow unexpectedly. Auditing your CSS output means inspecting the final compiled file to understand what made it in, how large it is, and whether anything unnecessary slipped through. A lean stylesheet loads faster, parses faster, and improves Core Web Vitals scores.

Measuring Your Bundle Size

The simplest audit starts with measuring file size. After building your project, check the size of the generated CSS file. Gzip size is the number that matters for real-world performance because browsers decompress on the fly. A well-tuned Tailwind output is typically 5–15 KB gzipped for most projects.

# Build and check output size
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
ls -lh ./dist/output.css
gzip -k ./dist/output.css && ls -lh ./dist/output.css.gz

Using the Tailwind CLI Watch Mode

During development, run Tailwind in watch mode to rebuild the stylesheet on every file change. This gives you real-time feedback on how your class additions affect output size. Use the --minify flag when measuring size to get production-accurate numbers rather than the development build.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
# In another terminal, measure:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

Inspecting the Output File

Open the compiled CSS file and search for class names you suspect might be unnecessary. If you see hundreds of animation keyframes you never use, or an entire color palette for a color you only reference once, those are candidates for pruning. Text search for your content globs to verify they match the right files.

/* Example: search compiled output for unexpected classes */
/* grep 'animate-bounce' ./dist/output.css */
/* grep 'rose-' ./dist/output.css | wc -l */

Checking Content Paths Are Correct

The most common source of bloat is misconfigured content paths. If your content array is too broad, Tailwind scans files it should not, picking up class-like strings from build artifacts, test fixtures, or third-party libraries. If it is too narrow, real classes get purged from production. Audit the content array first.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    // AVOID: './node_modules/**/*' — scans too much
  ],
};

Visualizing With PurgeCSS Stats

PurgeCSS can run as a standalone tool to analyze which selectors in your stylesheet are matched by your HTML files and which are not. While Tailwind has its own purging built in, running PurgeCSS separately gives you a detailed rejection report that highlights exactly which classes survived and which were removed.

# Install PurgeCSS globally for analysis
npm install -g purgecss

# Run analysis against your build output and HTML files
purgecss --css dist/output.css --content 'src/**/*.html' --output /tmp/purged.css
ls -lh /tmp/purged.css

Using Bundle Analyzers for CSS

Tools like Statoscope, webpack-bundle-analyzer, or Next.js's built-in ANALYZE=true mode visualize your entire bundle including CSS files. They show a treemap of what takes up space, which makes it easy to spot unexpected Tailwind class groups consuming a disproportionate share of bytes.

# Next.js bundle analysis
npm install @next/bundle-analyzer

# next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});

Identifying Dynamically Constructed Classes

A subtle source of bloat is dynamically constructed class names that JIT detects as strings and includes even though they are never used at runtime. For example, building a class from a variable like 'text-' + color forces you to safelist many permutations. Prefer full class names in your markup instead.

<!-- BAD: JIT cannot detect dynamic construction reliably -->
<!-- class="text-" + color + "-500" -->

<!-- GOOD: Write complete class names -->
<div class="text-red-500">Red</div>
<div class="text-blue-500">Blue</div>
<div class="text-green-500">Green</div>

Auditing Safelist Entries

If you have added a safelist in your config, periodically audit those entries. Safelist items are always included regardless of whether they appear in scanned content. Over time, safe-listed classes from old features accumulate, adding bytes to every production build even after the feature is removed.

// tailwind.config.js
module.exports = {
  safelist: [
    // Audit these regularly — remove anything no longer needed
    'bg-red-500',
    'bg-green-500',
    {
      pattern: /bg-(red|green|blue)-(100|500|900)/,
    },
  ],
};

Comparing Builds Over Time

Treat CSS output size as a tracked metric in your CI pipeline. After each build, log the gzip size to a file or a dashboard. When the size spikes unexpectedly between commits, bisect the recent changes to find the culprit. Many teams set a size budget and fail the build when it is exceeded.

# Simple CI size budget check (shell script)
SIZE=$(wc -c < dist/output.css)
BUDGET=20000  # 20 KB uncompressed
if [ "$SIZE" -gt "$BUDGET" ]; then
  echo "CSS budget exceeded: $SIZE bytes (limit: $BUDGET)"
  exit 1
fi
echo "CSS size OK: $SIZE bytes"

Removing Unused Official Plugins

Official Tailwind plugins like @tailwindcss/typography and @tailwindcss/forms add hundreds of rules when enabled. If you are not using Prose content or styled form elements, remove the plugin from your config. Every plugin you remove is a meaningful chunk of bytes saved from the final bundle.

// BEFORE: both plugins always included
plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
],

// AFTER: only include what you actually use
plugins: [
  // require('@tailwindcss/typography'), // removed — not using prose
  require('@tailwindcss/forms'),
],

Quick Check

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

Lesson Recap

In this lesson you learned: measuring gzip size as the key production metric, auditing content paths to prevent over-scanning or under-scanning files, and removing unused plugins and safelist entries to keep the bundle lean. Next up we explore class sorting with the Prettier plugin.

常见问题解答

「审查 CSS 输出」课时是免费的吗？

是的 — 「审查 CSS 输出」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。

「审查 CSS 输出」这节课中我会学到什么？

使用 PurgeCSS 报告和捆绑包分析器等工具，检查哪些 Tailwind 类进入了生产构建，以及它们进入的原因。你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Tailwind CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「审查 CSS 输出」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？

能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Tailwind CSS Academy