Closed
Description
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);
....
Metadata
Metadata
Assignees
Labels
No labels