Using Tailwind CSS in ASP.NET Application

Photo by KOBU Agency on Unsplash

Using Tailwind CSS in ASP.NET Application


1 min read

Dot Net Project

  • Create a dot net project either from command-line or from Visual Studio.

  • Move to the project directory in visual studio integrated terminal.

Setup Tailwind CSS

  • Install tailwind with the command: npm i tailwindcss

  • Create tailwind config file: npx tailwindcss init

Modify Tailwind Config

Change the config file content as follows:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  theme: {
    extend: {},
  plugins: [],

Setup Script

Add the following script segment in package.json file. Then create site.css and output.css files inside ./wwwroot/css directory:

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

Add Tailwind directives

In ./wwwroot/css/site.css, add following directives:

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

Link the output.css in ./Views/Shared/_Layout.cshtml to use the tailwind styles:

<link rel="stylesheet" href="/css/outptu.css">

Start Tailwind CSS

In visual studio terminal, start tailwind live for development with command:

npm run watch

For production, build the CSS output with command:

npm run css:build