I have downloaded the latest (v4.0.4) TailwindCSS standalone CLI and created the following files.
tailwind.config.js
module.exports = {
content: ["./index.html"],
theme: {
extend: {},
},
plugins: [],
}
tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="text-emerald-400 text-5xl font-bold">Lorem Ipsum</p>
</body>
</html>
I started watching the CSS with
./tailwindcss -i tailwind.css -o style.css --watch
≈ tailwindcss v4.0.4
Done in 41ms
However, style.css doesn't contain the styles in my index.html page.
style.css
/*! tailwindcss v4.0.4 | MIT License | */
.relative {
position: relative;
}
.mx-auto {
margin-inline: auto;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.w-full {
width: 100%;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.object-cover {
object-fit: cover;
}
.text-center {
text-align: center;
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, ease);
transition-duration: var(--tw-duration, 0s);
}
.duration-700 {
--tw-duration: 700ms;
transition-duration: 700ms;
}
@property --tw-duration {
syntax: "*";
inherits: false;
}
What am I missing here?
I have downloaded the latest (v4.0.4) TailwindCSS standalone CLI and created the following files.
tailwind.config.js
module.exports = {
content: ["./index.html"],
theme: {
extend: {},
},
plugins: [],
}
tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="text-emerald-400 text-5xl font-bold">Lorem Ipsum</p>
</body>
</html>
I started watching the CSS with
./tailwindcss -i tailwind.css -o style.css --watch
≈ tailwindcss v4.0.4
Done in 41ms
However, style.css doesn't contain the styles in my index.html page.
style.css
/*! tailwindcss v4.0.4 | MIT License | https://tailwindcss.com */
.relative {
position: relative;
}
.mx-auto {
margin-inline: auto;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.w-full {
width: 100%;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.object-cover {
object-fit: cover;
}
.text-center {
text-align: center;
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, ease);
transition-duration: var(--tw-duration, 0s);
}
.duration-700 {
--tw-duration: 700ms;
transition-duration: 700ms;
}
@property --tw-duration {
syntax: "*";
inherits: false;
}
What am I missing here?
Share Improve this question edited 2 days ago rozsazoltan 7,6965 gold badges17 silver badges36 bronze badges asked 2 days ago SigSig 5,94811 gold badges60 silver badges99 bronze badges1 Answer
Reset to default 1Starting from v4, the @tailwind directive has been deprecated, and instead, you should use @import "tailwindcss";. A separate CLI package has been created, so the command is now npx @tailwindcss/cli instead of npx tailwindcss. By default, the legacy JavaScript-based configuration is no longer used, but you can still use it in v4 with the @config directive.
Since some elements of your question have already been answered individually, but had to be explained together in a new compilation, I'll leave the links here from where the sources originate:
- Removed
@tailwinddirective - StackOverflow - TailwindCSS v4 is backwards compatible with v3 - StackOverflow
- New configuration option in v4 - StackOverflow
- Changed
npx tailwindcsstonpx @tailwindcss/cli- StackOverflow