this is a request to provide basic set of steps and maybe some base samples of successful integration of Tailwind 4.0 (the latest pattern following their current instructions on the website) with Visual Studio (preferably 2022) using Tailwind CLI.
i have been using Tailwind for my Blazor projects for a while now which works fine. Tailwind has released 4.0 and the structure has changed a bit. i have tried to run integration of Tailwind based on their current guide steps without success. some steps are not intuitively clear as they are described on the website and perhaps i am doing something wrong. this is an attempt to see if anyone has already walked the path so perhaps this can save time to others.
current setup based on Tailwind 3.4.17. consists of the following components.
- tailwind.config.js – which represents configuration for tailwind engine.
- package.json – which among other elements includes a “scripts” collection like so:
{
"scripts": {
"buildcss": "npx tailwindcss -i ./wwwroot/css/suorce.css -o ./wwwroot/css/tailwind.min.css"
}
}
- the project file contains instructions to execute script as part of build routine:
<Target Name="PostBuild" AfterTargets="PostBuildEvent">
<Exec Command="npm install @tailwindcss/forms" />
<Exec Command="npm run buildcss" />
</Target>
This works fine. attempting to execute the same after having updated the modules to latest tailwind and the source.css to include @import “tailwindcss”; fails.
@import "tailwindcss";