Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
vikash opened this issue Feb 20, 2025 · 2 comments
Closed

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

vikash opened this issue Feb 20, 2025 · 2 comments

Comments

@vikash
Copy link

vikash commented 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
Copy link
Contributor

wongjn commented 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:

@rozsazoltan

This comment has been minimized.

Sign in to view
@tailwindlabs tailwindlabs locked and limited conversation to collaborators Feb 21, 2025
@philipp-spiess philipp-spiess converted this issue into discussion #16711 Feb 21, 2025

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@vikash @wongjn @rozsazoltan