Replies: 2 comments 4 replies
-
|
Is the error message a VS Code warning or a Tailwind CSS compiler error? It is not clear from the question what kind of error it is or what exactly is being reported. If it is a VS Code warning, this could be a relevant answer. If it is a compilation error, then you need to know that starting from v4, you also have to use package.json // package.json
{
"imports": {
"#tailwind.css": "./assets/styles/css/tailwind.css"
},
} Header.vue <style>
@reference "#tailwind.css";
header {
@apply bg-neutral-0;
}
</style> |
Beta Was this translation helpful? Give feedback.
-
|
Hi 👋 When using Tailwind v4 with Vue In v4, you need to explicitly reference your Tailwind file using Example: <style module lang="postcss"> @reference "#tailwind.css"; .button { @apply bg-blue-500 text-white px-4 py-2 rounded; } </style>Make sure:
{
After that, restart your dev server. Without Let me know if this resolves it 👍 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
os: windows10
$ pnpm list Legend: production dependency, optional only, dev only vite-vue-starter@0.0.0 ~/vitejs-vite-scp4mdee (PRIVATE) dependencies: vue 3.5.27 devDependencies: @tailwindcss/vite 4.1.18 @vitejs/plugin-vue 6.0.3 tailwindcss 4.1.18 vite 7.3.1https://stackblitz.com/edit/vitejs-vite-scp4mdee?file=src%2FApp.vue
Beta Was this translation helpful? Give feedback.
All reactions