home - posts - about - twitter - rss - search

Installing Tailwind CSS on .NET Core MVC/Razor

dotnet tailwind
  1. Go to the web project directory

  2. Run the following command which will create a package.json file

npm init -y
  1. Install Tailwind
npm install -D tailwindcss
  1. Add the build script to package.json. This will generate the Tailwind CSS output at /www/css/styles.css location.
"scripts": {
    "css:build": "npx tailwindcss -i ./wwwroot/css/site.css -o ./wwwroot/css/styles.css --minify"
  1. Generate Tailwind config file (tailwind.config.js) by running the command
npx tailwindcss init
  1. Add the files pattern to the 'content' section of the tailwind.config.js file (note: ./Pages/**/*.cshtml is for Razor and ./Views/**/*.cshtml is for MVC)
module.exports = {
    content: [
    theme: {
        extend: {},
    plugins: [],
  1. Create site.css file under /wwwroot/css folder with the following imports
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Edit the web .csproj file to ensure that the Tailwind CSS build script is run during build/deploy
  <UpToDateCheckBuilt Include="wwwroot/css/site.css" Set="Css" />
  <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />

<Target Name="Tailwind" BeforeTargets="Build">
  <Exec Command="npm run css:build"/>
  1. Include the path to the CSS file in the layout file
<link rel="stylesheet" href="~/css/styles.css" asp-append-version="true" />

That's it!