[v4] Unused CSS classes are not being removed #16711

vikash · 2025-02-20T19:30:06Z

vikash
Feb 20, 2025

OS: macOS 15.3.1
Node: v22.13.1
npm: 10.9.2

package.json

{
  "devDependencies": {
    "@tailwindcss/cli": "^4.0.7",
    "tailwindcss": "^4.0.7"
  }
}

src/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-4xl font-bold">Welcome</h1>
<p class="text-lg text-gray-600">Test</p>
</body>
</html>

src/input.css

@import "tailwindcss";

Command used to build: npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css

output.css has 2485 lines with all classes which are not being used. Expected behaviour was to have a really small file.

/*! tailwindcss v4.0.7 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(0.971 0.013 17.38);
    --color-red-100: oklch(0.936 0.032 17.717);
    --color-red-200: oklch(0.885 0.062 18.334);
    --color-red-300: oklch(0.808 0.114 19.571);
    --color-red-400: oklch(0.704 0.191 22.216);
    --color-red-500: oklch(0.637 0.237 25.331);
    --color-red-600: oklch(0.577 0.245 27.325);
    --color-red-700: oklch(0.505 0.213 27.518);
    --color-red-800: oklch(0.444 0.177 26.899);
    --color-red-900: oklch(0.396 0.141 25.723);
    --color-red-950: oklch(0.258 0.092 26.042);
    --color-orange-50: oklch(0.98 0.016 73.684);
....

wongjn · 2025-02-20T20:09:51Z

wongjn
Feb 20, 2025

Consider having a .gitignore file that contains:

/node_modules

For the CSS variables, efforts are underway to clear unused CSS variables, see:

0 replies

This comment was marked as off-topic.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v4] Unused CSS classes are not being removed #16711

{{title}}

Replies: 2 comments

{{title}}

This comment was marked as off-topic.

Select a reply

[v4] Unused CSS classes are not being removed #16711

vikash Feb 20, 2025

Replies: 2 comments

wongjn Feb 20, 2025

This comment was marked as off-topic.

vikash
Feb 20, 2025

wongjn
Feb 20, 2025