Step By Step Guide To Setting Up TailwindCss In A .Net Core Web App

#tailwindcss #aspnetcore

I've recently started to learn TailwindCss. I'm predominantly a .Net developer and really dislike all the front end tooling. Maybe because I haven't spent enough time doing it, but I keep forgetting all the millions of commands and NPM plugins I'm supposed to be using.

So this is step by step guide (Mainly for my own reference 😂) on how to get it setup. This guide is assuming you have a .Net Core Web App setup already and have the 'Developer Powershell' window open in VS or Terminal open in VS Code. Make sure you have the path set to your web project and not the root of the solution.

Open up a terminal at the root of your website project and then run the following to get npm initialised.

npm init -y

Making sure you are still in the root of your web project. Install the latest versions of TailwindCss, PostCss, PostCss CLI, Autoprefixer & PurgeCss via npm

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli@latest @fullhuman/postcss-purgecss

Run the command below and it's creates a TailwindCss config file in the root of your web project called tailwind.config.js

npx tailwindcss init

This is optional, but I found I needed a couple of extra TailwindCss plugins. One for default form element styling and one for Typography. So open up your newly created tailwind.config.js file and under the plugins: section add the following

plugins: [
   require('@tailwindcss/forms'),
   require('@tailwindcss/typography')
]

Install the plugins via NPM (You never had to do this part, but recently you get an error if you don't manually install them)

npm install -D @tailwindcss/forms @tailwindcss/typography

Manually create a postcss.config.js file in the root of your project and add the following

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

Create two CSS files, one for TailwindCss to use and one for the website to use. Where you put these is up to you, however further in this step by step you will need to update the paths if you don't use the same. I'm going to create /css/tailwind.css and /wwwroot/css/styles.css. Styles.css is where the final styles will be saved.

In your tailwind.css file add the specific tailwind directives shown below and save the file.

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

Setup the NPM build script in your package.json under the scripts section add the following (Remember to update the file paths/names if your CSS files are in a different location or named differently)

"scripts": {
   "build-tailwind": "postcss css/tailwind.css -o wwwroot/css/styles.css",
   "watch-tailwind": "postcss css/tailwind.css -o wwwroot/css/styles.css --watch",
}

We can now run the build tailwind script and get all the TailwindCss styles into the styles.css file. This will literally put all the styles from TailwindCss in. So it will make a HUGE CSS file. This is fine for development, but I'll explain further down how to trim this down to only the CSS TailwindCss classes you are using. This makes the file MUCH smaller in production.

npm run build-tailwind

We can also set a watch on tailwind.css so if you make any changes it will auto build

npm run watch-tailwind

As mentioned above, this next part is for when you are ready for production. We want to strip out all unused TailwindCss classes.

To setup PurgeCss (We installed the npm package at the beginning) you need to add it to your PostCss config file, add another require(‘’) under your existing ones. You need to set the path for the templates\files you want it to check for classes. Here is what the whole file should look like. REMEMBER, you need to update the path(s) to where it should be looking for all YOUR views/pages/html files etc...

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require('@fullhuman/postcss-purgecss')({
            content: [
                './Src/MyProject.Web/Pages/**/*.cshtml',
                //'./Src/MyProject.Web/Pages/**/.html', // This is how you add other files
            ],
            defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
        })
    ]
}

If you run npm run build-tailwind now, that should only save the classes you've used. Personally I leave this whole thing commented out until I am finished and ready to push to production.

Pretty sure there must be a way to dictate a build with or without PurgeCss but as I said at the beginning of this post. I'm not very knowledgeable about all the front end wizardry.

Top comments (9)

Said1996 • May 23 '21

Hello there,
Thanks for this setup but this doesn't work on Visual Studio IDE. Can you test if that's working on Visual Studio.

Thanks...

˗ˏˋ Lee ˎˊ˗ ☄️ • Sep 21 '21

This does work as I've just followed it. Usual problems will be you are not running the npm commands in the root of your website project. Also, if purgecss is not working then the path to your files is wrong.

KirkFindley • Sep 21 '21

When I first follow this it did not work at all, which is why I was wanting to look at the source code. I did get it working but alter it to where it can run in VS code and VS Studio IDK.