AspNet.Tailwind.Vite 1.0.4

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package AspNet.Tailwind.Vite --version 1.0.4
                    


                    

                
NuGet\Install-Package AspNet.Tailwind.Vite -Version 1.0.4
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="AspNet.Tailwind.Vite" Version="1.0.4" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="AspNet.Tailwind.Vite" Version="1.0.4" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="AspNet.Tailwind.Vite" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add AspNet.Tailwind.Vite --version 1.0.4
                    


                    

                
#r "nuget: AspNet.Tailwind.Vite, 1.0.4"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package AspNet.Tailwind.Vite@1.0.4
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=AspNet.Tailwind.Vite&version=1.0.4
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=AspNet.Tailwind.Vite&version=1.0.4
                    


                            Install as a Cake Tool

AspNet.Tailwind.Vite

Zero-configuration Tailwind CSS v4 + Vite integration for ASP.NET Core MVC.

Inspired by how Laravel integrates Vite — install once, run two commands, done.

NuGet NuGet CLI License: MIT GitHub

Features

  • ⚡ Zero Configuration — no tailwind.config.js, no postcss.config.js
  • 🔥 Hot Module Replacement — instant CSS updates without page reload
  • 📦 Automatic Manifest Reader — production assets resolved with cache busting
  • 🔄 Auto Dev/Prod Switching — based on ASPNETCORE_ENVIRONMENT
  • 🚀 Publish Integration — dotnet publish automatically runs npm run build
  • 📄 Per-page JS — multi-entry support via @await Html.Vite("pages/dashboard")
  • 🛠️ CLI Installer — scaffold everything with one command
  • 🌐 Cross-platform — Windows, Linux, macOS
  • 🎯 Targets — .NET 8, .NET 9, .NET 10

Requirements

  • .NET 8 / 9 / 10
  • ASP.NET Core MVC
  • Node.js 20+
  • npm

Quick Start

# 1. Create a new MVC project
dotnet new mvc

# 2. Add the NuGet package
dotnet add package AspNet.Tailwind.Vite

# 3. Install the CLI tool (one-time, global)
dotnet tool install -g AspNet.Tailwind.Vite.Cli

# 4. Scaffold frontend
aspnet-vite install

# 5. Start development
npm run dev
dotnet watch

That's it. No manual configuration needed.

Packages

This project ships two separate packages.

AspNet.Tailwind.Vite — NuGet Package

The runtime library. Install this in every ASP.NET Core MVC project that uses Tailwind + Vite.

dotnet add package AspNet.Tailwind.Vite

Provides:

  • builder.Services.AddVite() — registers all required services
  • @await Html.Vite() — Razor helper that renders the correct asset tags
  • Manifest reader with caching
  • Dev server health checker
  • MSBuild targets for publish integration

AspNet.Tailwind.Vite.Cli — dotnet tool

The installer CLI. Install this globally on your machine once.

dotnet tool install -g AspNet.Tailwind.Vite.Cli

Provides the aspnet-vite command. See CLI Commands below.

Installation

Step 1 — Add the NuGet package

dotnet add package AspNet.Tailwind.Vite

Step 2 — Install the CLI tool

dotnet tool install -g AspNet.Tailwind.Vite.Cli

⚠️ Windows users: After installation, make sure %USERPROFILE%\.dotnet\tools is in your PATH. If aspnet-vite is not recognized, run this once:

setx PATH "%PATH%;%USERPROFILE%\.dotnet\tools"

Then restart your terminal.

Step 3 — Run the installer

From your project directory:

aspnet-vite install

The installer will:

  1. Validate the project is ASP.NET Core MVC
  2. Check Node.js and npm are installed
  3. Generate package.json, vite.config.js, src/css/app.css, src/js/app.js
  4. Run npm install
  5. Register AddVite() in Program.cs
  6. Inject @await Html.Vite() and section placeholders in _Layout.cshtml

Step 4 — Start developing

npm run dev    # Start Vite Dev Server with HMR
dotnet watch   # Start ASP.NET Core

Generated Project Structure

your-project/
│
├── src/
│   ├── css/
│   │   └── app.css          ← @import "tailwindcss"
│   └── js/
│       ├── app.js           ← global entry point
│       └── pages/           ← per-page entry points (optional)
│           └── dashboard.js
│
├── wwwroot/
│   └── build/               ← Vite output (do not commit)
│
├── package.json
└── vite.config.js

Usage

Global assets — @await Html.Vite()

The installer automatically adds this to your _Layout.cshtml:

@using AspNet.Tailwind.Vite

<head>
    ...
    @await Html.Vite()
    @await RenderSectionAsync("Styles", required: false)
</head>
<body>
    ...
    @await RenderSectionAsync("Scripts", required: false)
</body>

Development renders:

<script type="module" src="http://localhost:5173/src/js/app.js"></script>

Production renders:

<link rel="stylesheet" href="/build/assets/app-DCv6Vl7t.css" />
<script type="module" src="/build/assets/app-BtHxigFi.js"></script>

Per-page assets — @await Html.Vite("pages/dashboard")

For page-specific JavaScript, create a file under src/js/pages/ and reference it from the view.

1. Create the file

src/js/pages/dashboard.js
src/js/pages/users/index.js
src/js/pages/alat-pengumpul/create.js

No registration needed — vite.config.js auto-discovers all files under src/js/.

2. Reference it from the view

@* Views/Dashboard/Index.cshtml *@

@section Scripts {
    @await Html.Vite("pages/dashboard")
}

Short name resolution:

You write Resolves to
"pages/dashboard" src/js/pages/dashboard.js
"pages/users/index" src/js/pages/users/index.js
"src/js/pages/dashboard.js" src/js/pages/dashboard.js (used as-is)

3. Per-page CSS

Import CSS directly inside the page JS file:

// src/js/pages/dashboard.js
import "../../css/pages/dashboard.css";

document.addEventListener("DOMContentLoaded", () => {
  // page-specific logic
});

Or use @section Styles:

@section Styles {
    @await Html.Vite("pages/dashboard")
}

Adding third-party libraries

Via npm (recommended) — Vite bundles the library into your output:

npm install alpinejs

// src/js/app.js
import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();

Via wwwroot/lib/ — for pre-built files you already have, not processed by Vite:

wwwroot/lib/select2/select2.min.css
wwwroot/lib/select2/select2.min.js

@section Styles {
    <link rel="stylesheet" href="~/lib/select2/select2.min.css" />
}

@section Scripts {
    <script src="~/lib/select2/select2.min.js"></script>
    <script>
        // inline initialization
    </script>
}

Configuration

All defaults can be overridden in appsettings.json:

{
  "Vite": {
    "DevServer": "http://localhost:5173",
    "BuildDirectory": "wwwroot/build",
    "Manifest": "wwwroot/build/.vite/manifest.json",
    "EntryPoint": "src/js/app.js"
  }
}

CLI Commands

aspnet-vite install

Scaffolds the entire frontend setup in a new project.

aspnet-vite install
  • Validates project, Node.js, and npm
  • Generates package.json, vite.config.js, src/css/app.css, src/js/app.js
  • Runs npm install
  • Patches Program.cs and _Layout.cshtml
  • Idempotent — prompts before overwriting existing files

aspnet-vite build

Runs npm run build.

aspnet-vite build

aspnet-vite doctor

Checks your project setup and reports any issues.

aspnet-vite doctor

Output example:

✓ Node.js                v22.0.0
✓ npm                    10.0.0
✓ package.json           Found
✓ vite.config.js         Found
✓ src/css/app.css        Found
✓ src/js/app.js          Found
✓ wwwroot/build          Found
✓ manifest.json          Found

All checks passed!

aspnet-vite remove

Removes files generated by the installer. Does not touch files you created.

aspnet-vite remove

Production

dotnet publish

The package automatically runs npm run build before publishing. If node_modules is missing (e.g. on a fresh CI runner), npm install is run first.

dotnet publish -c Release

No extra steps needed.

Skip the automatic build

Set ViteSkipPublishBuild=true in your .csproj if you want to control the build step manually:

<PropertyGroup>
  <ViteSkipPublishBuild>true</ViteSkipPublishBuild>
</PropertyGroup>

What gets published

Path Published Notes
wwwroot/build/ ✅ Compiled Vite output
wwwroot/lib/ ✅ Static vendor files
src/ ❌ Source only — bundled by Vite
node_modules/ ❌ Build tool only

How It Works

Development
───────────
Browser ←── ASP.NET Core (Razor renders @await Html.Vite())
                  ↓
          <script type="module" src="http://localhost:5173/src/js/app.js">
                  ↓
          Vite Dev Server (HMR active)


Production
──────────
dotnet publish
  → npm install  (if node_modules missing)
  → npm run build
  → wwwroot/build/assets/app-[hash].css
  → wwwroot/build/assets/app-[hash].js
  → wwwroot/build/.vite/manifest.json

Browser ←── ASP.NET Core reads manifest.json
                  ↓
          <link href="/build/assets/app-[hash].css" />
          <script src="/build/assets/app-[hash].js" />

Roadmap

v1.0 (current)

  • ASP.NET Core MVC
  • Tailwind CSS v4
  • Vite with HMR
  • @await Html.Vite() helper
  • Multi-entry (per-page JS)
  • CLI installer
  • Publish integration

v1.1

  • Razor Pages support
  • Flowbite preset
  • DaisyUI preset

v1.2

  • Blazor Server
  • Blazor Web App

v2.0

  • React preset
  • Vue preset
  • Svelte preset

Troubleshooting

aspnet-vite command not found after installing the CLI tool

On Windows, the global tool folder (%USERPROFILE%\.dotnet\tools) may not be in your system PATH.

Solution:

  1. Verify the tool is installed: 
    dotnet tool list -g
  2. Add the tools folder to PATH: 
    setx PATH "%PATH%;%USERPROFILE%\.dotnet\tools"
  3. Restart your terminal and try again.

Alternatively, call the tool directly:

%USERPROFILE%\.dotnet\tools\dotnet-vite install

License

MIT © Muammar

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

  • net10.0

    • No dependencies.

  • net8.0

    • No dependencies.

  • net9.0

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.4 124 7/24/2026
1.0.2 109 7/24/2026
1.0.0 133 7/17/2026

Update README — correct CLI command usage (aspnet-vite, not dotnet vite).