CI/CD 2026-03-10

Automate CSS Minification in GitHub Actions Build Pipelines

Q: <code>cleancss</code> vs <code>postcss</code> vs <code>lightningcss</code> — which to use?

clean-css is mature and reliable. lightningcss (Rust-based) is 100x faster and also handles transforms. postcss is a full pipeline with plugins. For simple minification in CI, cleancss or lightningcss are best.

Q: How do I minify TailwindCSS output in CI?

Use Tailwind's built-in minification: npx tailwindcss -i src/input.css -o dist/output.css --minify. This purges unused classes AND minifies in one step, typically reducing files by 90%+ compared to the full Tailwind bundle.

Automatically minify CSS files in your GitHub Actions build pipeline to reduce bundle size and improve Core Web Vitals scores. Includes workflow YAML with size comparison reporting.

⚙️ Uses: CSS Minifier — Free

The Problem

Your frontend CSS files are committed in readable, unminified format for developer experience, but served in that same format to users — costing 30-60% extra bandwidth per page load and hurting your Core Web Vitals FCP and LCP scores.

Why This Matters

CSS file size directly impacts page load time. A 100KB CSS file becomes 60KB when minified — that's 40KB saved on every page load for every user. Google's Core Web Vitals (which affect search ranking) include FCP (First Contentful Paint), which depends on how fast your CSS loads and parses.

Step-by-Step Instructions

Test CSS minification with the tool below

Paste your main CSS file into the minifier to see the before/after size difference. This helps you estimate the bandwidth savings before adding the step to your pipeline.

Add a CSS minification step using <code>cleancss</code>

cleancss is the industry-standard CSS minifier. Install with npm install -g clean-css-cli in your workflow and run cleancss -o dist/style.min.css src/style.css.

Report size savings as a CI check

Compare original and minified file sizes and post the savings report as a PR comment. This makes performance impact visible in code review and motivates keeping CSS lean.

Fail the build if CSS exceeds a size budget

Enforce a CSS size budget: MINIFIED_SIZE=$(wc -c < dist/style.min.css); if [ $MINIFIED_SIZE -gt 50000 ]; then echo "CSS too large: ${MINIFIED_SIZE}b > 50KB budget"; exit 1; fi.

Try It Now — CSS Minifier

Open full page →

CSS Minifier — Live Demo

All processing happens in your browser — no data is sent to any server.

Before & After Example

Problem: unminified CSS served in production wastes bandwidth

/* Original style.css - 87KB */
.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Use flexbox layout */
    justify-content: space-between;
}

/* Navigation styles */
.navbar {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 16px 24px;
}

/* 2,400 more lines... */

Solution: automated CSS minification in GitHub Actions workflow

name: Build and Optimize CSS
on:
  push:
    paths: ['src/**/*.css']
  pull_request:
    paths: ['src/**/*.css']

jobs:
  minify-css:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install CSS minifier
        run: npm install -g clean-css-cli

      - name: Minify CSS files
        id: minify
        run: |
          mkdir -p dist/css
          TOTAL_ORIGINAL=0
          TOTAL_MINIFIED=0

          for CSS_FILE in src/css/*.css; do
            FILENAME=$(basename "$CSS_FILE")
            OUTPUT="dist/css/${FILENAME%.css}.min.css"

            cleancss -o "$OUTPUT" "$CSS_FILE"

            ORIG=$(wc -c < "$CSS_FILE")
            MIN=$(wc -c < "$OUTPUT")
            SAVINGS=$((ORIG - MIN))
            PCT=$((SAVINGS * 100 / ORIG))

            echo "$FILENAME: ${ORIG}b → ${MIN}b (saved ${SAVINGS}b, ${PCT}%)"
            TOTAL_ORIGINAL=$((TOTAL_ORIGINAL + ORIG))
            TOTAL_MINIFIED=$((TOTAL_MINIFIED + MIN))
          done

          TOTAL_SAVINGS=$((TOTAL_ORIGINAL - TOTAL_MINIFIED))
          echo "total_original=$TOTAL_ORIGINAL" >> $GITHUB_OUTPUT
          echo "total_minified=$TOTAL_MINIFIED" >> $GITHUB_OUTPUT
          echo "total_savings=$TOTAL_SAVINGS" >> $GITHUB_OUTPUT

      - name: Enforce CSS size budget (50KB max)
        run: |
          BUDGET=51200
          ACTUAL=${{ steps.minify.outputs.total_minified }}
          if [ "$ACTUAL" -gt "$BUDGET" ]; then
            echo "❌ CSS budget exceeded: ${ACTUAL}b > ${BUDGET}b"
            exit 1
          fi
          echo "✓ CSS within budget: ${ACTUAL}b / ${BUDGET}b"

      - name: Upload minified CSS
        uses: actions/upload-artifact@v4
        with:
          name: minified-css
          path: dist/css/

Frequently Asked Questions

Should I commit minified CSS to the repository?

No. Generate minified CSS as part of your build pipeline and deploy from the build output. Committing both source and minified CSS creates merge conflicts and confuses diffs. Add dist/ to your .gitignore.

<code>cleancss</code> vs <code>postcss</code> vs <code>lightningcss</code> — which to use?

clean-css is mature and reliable. lightningcss (Rust-based) is 100x faster and also handles transforms. postcss is a full pipeline with plugins. For simple minification in CI, cleancss or lightningcss are best.

How do I minify TailwindCSS output in CI?

Use Tailwind's built-in minification: npx tailwindcss -i src/input.css -o dist/output.css --minify. This purges unused classes AND minifies in one step, typically reducing files by 90%+ compared to the full Tailwind bundle.

Related Workflows

{}

Open the standalone tool for more space, keyboard shortcuts, and additional features.

Open CSS Minifier →

← All Developer Guides