How to Configure Tailwind CSS v4 in an ASP.NET MVC Project?

[furqanahmad03]

I'm working on setting up Tailwind CSS in an ASP.NET MVC project, and previously, with Tailwind v3, the process involved initializing a tailwind.config.js file and specifying the CSS output location. The setup followed these steps:

1. Initialize a .NET MVC Project
2. Start a Node.js Project at the root using

npm init -y

4. Install Tailwind CSS with

npm install -D tailwindcss

5. Add a script to package.json for CSS compilation:

"scripts": {
    "css:build": "npx tailwindcss -i ./wwwroot/css/site.css -o ./wwwroot/css/styles.css --minify"
  }

6. Initialize the Tailwind Config using

npx tailwindcss init

7. Modify tailwind.config.js to include Razor pages:

module.exports = {
    content: [
       './Pages/**/*.cshtml',
       './Views/**/*.cshtml'
],
    theme: {
        extend: {},
    },
    plugins: [],
}

8. Create and configure site.css in wwwroot/css:

@tailwind base;
@tailwind components;
@tailwind utilities;

9. Modify .csproj file to ensure the CSS is built before deployment:

<ItemGroup>
  <UpToDateCheckBuilt Include="wwwroot/css/site.css" Set="Css" />
  <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />
</ItemGroup>

<Target Name="Tailwind" BeforeTargets="Build">
  <Exec Command="npm run css:build"/>
</Target>

10. Include the generated CSS file in _Layout.cshtml:

<link rel="stylesheet" href="~/css/styles.css" asp-append-version="true" />

This is working properly for v3 ( as I configured it for version 3.4.1 ). However, in Tailwind CSS v4, the traditional config file (tailwind.config.js) is no longer generated by default, and there's no CSS (tailwindcss) file in the .bin folder. This changes how Tailwind is configured and built in the project.

Issue

With these changes in Tailwind CSS v4, I'm unsure about the correct approach to:

• Configure Tailwind in an ASP.NET MVC project without the traditional config file.
• Manage the CSS build process.
• Ensure Razor pages are properly styled with Tailwind.

Question

What is the recommended way to integrate Tailwind CSS v4 with an ASP.NET MVC project? Are there any official or community-supported best practices for this setup?

Any guidance or updated documentation would be highly appreciated. Thank you!

[wongjn]

So we can try to transpose your steps for v4:

V3	V4
Initialize a .NET MVC Project	Initialize a .NET MVC Project
Start a Node.js Project at the root using npm init -y	Start a Node.js Project at the root using npm init -y
Install Tailwind CSS with npm install -D tailwindcss	Install Tailwind CSS with npm install -D @tailwindcss/cli The CLI interface is now in the @tailwindcss/cli. This will also automatically install tailwindcss as that package is a dependency.
Add a script to package.json for CSS compilation: "scripts": { "css:build": "npx tailwindcss -i ./wwwroot/css/site.css -o ./wwwroot/css/styles.css --minify" }	Add a script to package.json for CSS compilation: "scripts": { "css:build": "@tailwindcss/cli -i ./wwwroot/css/site.css -o ./wwwroot/css/styles.css --minify" } As before, the CLI interface is now in the @tailwindcss/cli. Also, npx is extraneous in both cases - you can omitt it within package.json scripts.
Initialize the Tailwind Config using npx tailwindcss init	Skip. There's no config to create.
Modify tailwind.config.js to include Razor pages: module.exports = { content: [ './Pages/**/*.cshtml', './Views/**/*.cshtml' ], theme: { extend: {}, }, plugins: [], }	Skip. Tailwind should be able to automatically find and scan these files.
Create and configure site.css in wwwroot/css: @tailwind base; @tailwind components; @tailwind utilities;	Create and configure site.css in wwwroot/css: @import "tailwindcss";
Everything from hereon should be the same steps