Standole Windows dont use tailwind.config.js

[Hacedor2003]

What version of Tailwind CSS are you using?

v4.1.4

What build tool (or framework if it abstracts the build tool) are you using?

standole

What operating system are you using?

Windows

Describe your issue

//Test proyect
tailwindcss -i ./app/globals.css -o ./main.css
Error: Cannot apply unknown utility class: bg-black
//My real project
tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/css/main.css
≈ tailwindcss v4.1.4

Done in 71ms

//tailwind.config.js
export default {
content: [
"./pages//*.{js,ts,jsx,tsx,mdx}",
"./components//.{js,ts,jsx,tsx,mdx}",
"./app/**/.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
principal: "#D9D9D9",
secundario: "#69b9f9",
negro: "#000000c2",
azul: "#07858a",
active: "#00d26a"
},
fontFamily: {
"ProstoOne-Regular": ["ProstoOne-Regular"],
sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
},
},
},
plugins: [],
};

// *********

On my real project dont read some clases for example the bg

//main.css
/! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com /
@layer properties;
.static {
position: static;
}
.container {
width: 100%;
}
.mx-auto {
margin-inline: auto;
}
.contents {
display: contents;
}
.flex {
display: flex;
}
.hidden {
display: none;
}
.h-screen {
height: 100vh;
}
.w-1/4 {
width: calc(1/4 * 100%);
}
.min-w-full {
min-width: 100%;
}
.flex-1 {
flex: 1;
}
.cursor-pointer {
cursor: pointer;
}
.list-inside {
list-style-position: inside;
}
.list-disc {
list-style-type: disc;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.overflow-x-auto {
overflow-x: auto;
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-b {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
transition-timing-function: var(--tw-ease, ease);
transition-duration: var(--tw-duration, 0s);
}
.duration-200 {
--tw-duration: 200ms;
transition-duration: 200ms;
}
.hover:underline {
&:hover {
@media (hover: hover) {
text-decoration-line: underline;
}
}
}
@Property --tw-border-style {
syntax: "";
inherits: false;
initial-value: solid;
}
@Property --tw-duration {
syntax: "";
inherits: false;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-border-style: solid;
--tw-duration: initial;
}
}
}

[philipp-spiess]

Hey! Tailwind CSS v4 doesn't use a config file by default anymore, check out the upgrade guides: https://tailwindcss.com/docs/upgrade-guide

You might want to download v3 of the standalone build or upgrade your app to use v4 👍

[Hacedor2003]

Thanks