.net Core and Tailwindcss in Visual Studio

Tailwindcss is a utility-first CSS framework. I've used it on a few projects now there are some really handy things it does.

This post is a quick step-by-step for getting it up and running in .net core web apps in visual studio. There are a few custom changes you need to make for .net projects.

And while I'm using Visual Studio, I do most of this from the cmd line. Open the command line and head to your web project folder

Installing TailwindCSS

Install tailwindcss via npm, and create your tailwind.config.js file.

npm install -D tailwindcss

npx tailwindcss init

Configure tailwind.cothe nfig.js

Next, we have to set the path in tailwind.config so that tailwind knows what pages to keep an eye on.

module.exports = {
    content: ["./views/**/*.{html,js,cshtml}"],
    theme: {
      extend: {},
    },
    plugins: [],
}

In this case, it's an MVC project, so it needs to watch the views folder and all the subfolders under views. Then I've also added .cshtml

Add Source CSS

Now we have to set up the source CSS, this will tell the tailwind CLI which parts we want to use.

In the wwwroot/css I created the input.css

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

Tailwind CLI

To build my CSS, I've been using the tailwind CLI from the command line. So as I make changes to the pages the changes come over.

npx tailwindcss -i ./wwwroot/css/input.css -o ./wwwroot/css/output.css --watch --minify

I also add the --minify command to it.

That's it, that's all I'm doing for the moment.

I know I can get Visual Studio to build the tailwind CSS on build steps, but since I debug and make changes as I'm working, I don't want to have to rebuild for the CSS to update itself with new classes I might be bringing in.