Using Tailwind CSS in ASP.NET Application

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: [
    './Pages/**/*.cshtml',
    './Views/**/*.cshtml'
  ],
  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 Output CSS

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

Reference:

https://medium.com/@omerconsept999/how-can-you-use-tailwindcss-with-net-core-mvc-445694739a6e