Integrating Tailwind CSS into an ASP.NET 7 MVC Project

Requirements

Before starting, ensure you have the following installed:

• Node.js (for npm and Tailwind CSS)
• .NET 7 SDK
• Terminal Emulator (e.g., PowerShell on Windows, or bash/zsh on Linux/macOS)

Step 1: Create the ASP.NET 7 MVC Project

1. Open your terminal or command prompt.
2. Run the following command to create a new ASP.NET 7 MVC project:

   dotnet new mvc -n YourProjectName
   

3. Navigate to the project directory:

   cd YourProjectName
   

Step 2: Initialize a Node.js Project

1. In the root of your ASP.NET project, initialize a Node.js project:

   npm init -y
   

   This creates a package.json file.

Step 3: Install Tailwind CSS

1. Install Tailwind CSS and its dependencies as development dependencies:

   npm install -D tailwindcss postcss autoprefixer
   

Step 4: Initialize Tailwind Configuration

1. Generate a Tailwind configuration file:

   npx tailwindcss init
   

   This creates a tailwind.config.js file.

Step 5: Configure Tailwind for Razor Pages

1. Open the tailwind.config.js file and update the content property to include your Razor and CSHTML files:

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

Step 6: Create and Configure the CSS File

1. In the wwwroot/css folder, create a new file named site.css (if it doesn’t already exist).
2. Add the Tailwind directives to site.css:

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

Step 7: Add a Build Script for Tailwind CSS

1. Open the package.json file and add a script to build Tailwind CSS:

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

   This script:
   • Takes site.css as the input.
   • Outputs the compiled CSS to styles.css.
   • Minifies the output for production.

Step 8: Add Build Tasks in .csproj

1. Open your .csproj file and add the following code to ensure Tailwind CSS is built when the project is compiled:

   <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>
   

Step 9: Include the Compiled CSS in Your Layout

1. Open _Layout.cshtml (located in Views/Shared).
2. Replace the default stylesheet link with the compiled Tailwind CSS file:

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

Step 10: Test Your Setup

1. Run the project to ensure Tailwind CSS is working:

   dotnet run
   

2. Open your browser and navigate to the project URL. Verify that Tailwind styles are applied.

Optional: Watch for Changes During Development

To automatically rebuild Tailwind CSS when changes are made, add a watch script to package.json:

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

Run the watch script during development:

npm run css:watch

Conclusion

Your ASP.NET 7 MVC project is now set up with Tailwind CSS! You can start using Tailwind's utility classes to style your application.

Reference

For more details, refer to the official Tailwind CSS documentation and the ASP.NET MVC integration guide.