Tailwind CSS Academy · 课时

分析并缩减捆绑包大小

测量最终 CSS 输出大小，找出遗漏的未使用样式，并调整内容 glob，以实现最高效的清除。

第 3 / 4 课13 个步骤

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

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

Why Bundle Size Still Matters With JIT

Tailwind's JIT engine eliminates most unused CSS automatically, but bundle size can still grow if you are not careful. An improperly configured content glob can include too many files, a large safelist can add hundreds of classes, or complex arbitrary values can inflate the output.

Even a well-configured Tailwind project benefits from occasional bundle auditing to confirm the output is as small as it should be and to catch configuration issues before they reach production.

Measuring Your CSS Output Size

The first step in analyzing your bundle is knowing its current size. Build your Tailwind CSS in production mode and check the file size before and after minification and compression.

Use wc -c to check raw bytes, and compare the gzip-compressed size which is what browsers actually download. A well-optimized Tailwind production stylesheet is typically 5-15KB uncompressed and 2-5KB gzipped.

# Build production CSS
NODE_ENV=production npx tailwindcss -i input.css -o dist/output.css --minify

# Check uncompressed size
wc -c dist/output.css
# Example output: 12048 dist/output.css (12KB uncompressed)

# Check gzipped size
gzip -c dist/output.css | wc -c
# Example output: 3421 (3.4KB gzipped — excellent)

# If size > 50KB uncompressed, investigate further

Checking Content Glob Coverage

The most common cause of oversized Tailwind output is an overly broad content glob that scans too many files, including vendored libraries or generated output files that happen to contain CSS-class-like strings.

Accidentally including node_modules/** or your compiled output directory can cause JIT to generate thousands of spurious classes. Review each glob in your content array and ensure it only covers your actual source templates.

// BAD: Too broad — scans node_modules (thousands of spurious classes)
module.exports = {
  content: ['**/*.{html,js}'],  // matches ALL files including node_modules!
};

// GOOD: Scoped to your actual source directories
module.exports = {
  content: [
    './src/**/*.{html,js,ts,tsx}',
    './pages/**/*.{js,ts,tsx}',
    './components/**/*.{js,ts,tsx}',
    // Explicitly include specific external packages if needed:
    './node_modules/@headlessui/react/**/*.{js,ts}',
  ],
};

Auditing With PurgeCSS Reports

You can use PurgeCSS in analyze mode (separate from Tailwind's built-in scanning) to generate a report of which CSS selectors are being kept and which would be removed. This helps identify unexpected classes in your output.

Alternatively, search your compiled CSS file for class patterns that should not be there: if you see hundreds of bg- variants including colors you never use, check your safelist patterns — they may be generating more classes than intended.

# Install PurgeCSS CLI
npm install -g purgecss

# Run PurgeCSS on your built CSS
purgecss --css dist/output.css \
         --content './src/**/*.html' \
         --output dist/purged.css \
         --rejected-css dist/rejected.css

# Check rejected.css — classes in this file are in your built CSS
# but not found in your templates.
# If there are many, review your safelist and content configuration.

Identifying Safelist Bloat

A large or broad safelist is a common source of bundle bloat. Each pattern generates many classes. For example, /bg-(red|green|blue|yellow|purple|orange|pink|indigo|violet|teal|cyan|rose)-(50|100|200|300|400|500|600|700|800|900|950)/ generates 132 background color classes alone — even if you only use 10 of them.

Audit your safelist by counting the patterns and estimating how many classes each generates. Remove patterns you added speculatively and only keep those for known dynamic class use cases.

// Bloated safelist (generates hundreds of classes)
safelist: [
  { pattern: /bg-(red|green|blue|yellow|purple|orange|pink)-(100|200|300|400|500|600|700|800|900)/ },
  // ^ generates 63 classes
  { pattern: /text-(red|green|blue|yellow|purple|orange|pink)-(100|200|300|400|500|600|700|800|900)/ },
  // ^ another 63
]
// Total: 126+ extra classes from safelist alone

// Optimized safelist (only what's actually used dynamically)
safelist: [
  { pattern: /bg-(red|green|yellow|blue)-(100|500)/ }, // 8 classes
  { pattern: /text-(red|green|yellow|blue)-(700|800)/ }, // 8 classes
]

Removing Unused Base Styles

Tailwind's preflight (base CSS reset) adds approximately 4KB of base styles. If you are using Tailwind alongside a CSS framework that has its own reset, or if you are incrementally adopting Tailwind, you may want to disable preflight.

Set corePlugins: { preflight: false } in your config to remove the reset. This can save a few KB, especially in projects where the base styles conflict with existing CSS.

// tailwind.config.js — disable preflight
module.exports = {
  corePlugins: {
    preflight: false,
  },
  // OR: disable multiple core plugins to reduce output
  corePlugins: {
    preflight: false,     // Remove reset styles
    container: false,     // Remove .container utility if unused
    float: false,         // Remove float utilities if not used
    clear: false,
    skew: false,          // Remove skew transforms if not used
  },
}

Disabling Unused Core Plugins

You can disable entire groups of utilities that your project never uses to reduce the generated CSS. For example, a project with no CSS grid usage can disable the grid plugins. A project with no transforms can disable rotate, scale, skew, and translate.

Check your templates for utility prefixes you never use. Disabling a core plugin prevents all variants of those utilities from being generated, even if they somehow appear in the content scan (from template strings that resemble class names).

// tailwind.config.js
module.exports = {
  corePlugins: [
    // Whitelist approach: only enable plugins your project uses
    // (Empty array = disable ALL core plugins — not recommended unless you know exactly what you need)
    // Better: use the object form to disable specific ones
  ],
  // Object form: disable only specific plugins
  corePlugins: {
    // If your project doesn't use blur/backdrop-filter at all:
    backdropBlur: false,
    backdropBrightness: false,
    backdropContrast: false,
    backdropGrayscale: false,
    backdropHueRotate: false,
    backdropInvert: false,
    backdropOpacity: false,
    backdropSaturate: false,
    backdropSepia: false,
  },
}

Enabling CSS Compression

Beyond Tailwind's own minification (--minify), configure your build tool to apply additional CSS compression. Vite and webpack both support CSS minification via their built-in or plugin-based pipelines.

For maximum compression, combine CSS minification with Brotli compression on the server level. Brotli achieves 15-25% better compression than gzip on CSS files, reducing your effective payload further.

// vite.config.js — enable CSS minification
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    cssMinify: true,  // default in production mode
    cssCodeSplit: true, // split CSS per page in multi-page apps
  },
});

// next.config.js — Next.js minifies CSS automatically in production
// No extra configuration needed

Tree-Shaking Unused JavaScript in Tailwind Projects

In React and Vue projects, tree-shaking eliminates unused JavaScript, but it also affects how classes reach JIT. If a component is tree-shaken from the bundle, its class strings might not appear in the compiled JS, causing JIT to miss them.

The solution is to configure your content globs to point to source files (pre-tree-shake), not compiled output. JIT should always scan your source TypeScript/JavaScript files, not the compiled bundle.

// tailwind.config.js
module.exports = {
  content: [
    // Source files (correct): JIT sees all possible classes
    './src/**/*.{ts,tsx}',
    './src/**/*.{js,jsx}',

    // Compiled output (wrong): some classes may be missing
    // './dist/**/*.js', // Don't scan compiled output
  ],
}

Analyzing Bundle Size Over Time

Bundle size tends to grow gradually as features are added. Set up a CI check that measures CSS bundle size on every pull request and fails if it exceeds a threshold. This catches accidental safelist expansions or overly broad glob additions before they reach production.

Tools like bundlesize, size-limit, or a simple bash script comparing file sizes can integrate into your CI pipeline to enforce size budgets.

# .github/workflows/css-size-check.yml
# Build CSS and fail if it exceeds 20KB
npx tailwindcss -i input.css -o /tmp/tailwind.css --minify
CSS_SIZE=$(wc -c < /tmp/tailwind.css)
echo "CSS size: ${CSS_SIZE} bytes"
if [ ${CSS_SIZE} -gt 20480 ]; then
  echo "ERROR: CSS bundle exceeds 20KB limit (${CSS_SIZE} bytes)"
  exit 1
fi

Final Optimization Checklist

Before shipping a Tailwind project to production, run through this checklist:

NODE_ENV=production is set during the build
Content globs do not include node_modules broadly
Safelist patterns are narrow and documented
Unused core plugins are disabled in config
CSS is minified (Tailwind --minify flag or build tool)
Server compression (gzip or Brotli) is enabled
CSS file size is under your target budget (typically 15KB uncompressed)

# Full production optimization command
NODE_ENV=production npx tailwindcss \
  -i ./src/input.css \
  -o ./dist/tailwind.min.css \
  --minify

# Verify result
echo 'Uncompressed:' $(wc -c < ./dist/tailwind.min.css) 'bytes'
echo 'Gzipped:' $(gzip -c ./dist/tailwind.min.css | wc -c) 'bytes'

Quick Check

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

在交互式课程中回答

Lesson Recap

In this lesson you learned: CSS bundle size measurement using the production build with --minify and wc -c plus gzip inspection; content glob scoping to prevent JIT from scanning node_modules or output directories; and safelist auditing to ensure patterns are narrow and only cover genuinely dynamic class use cases. Next up we explore arbitrary values and their cost.

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 30
课程: 120

免费开始学习查看完整课程

常见问题解答

「分析并缩减捆绑包大小」课时是免费的吗？

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

「分析并缩减捆绑包大小」这节课中我会学到什么？

测量最终 CSS 输出大小，找出遗漏的未使用样式，并调整内容 glob，以实现最高效的清除。你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

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

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

「分析并缩减捆绑包大小」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Tailwind CSS Academy