How to Use Tailwind with Blazor
Tags: blazor, dotnet, css, frontend
Published: 2020-12-01 21:51:54

---
title: How to Use Tailwind with Blazor
published: true
description: A quick guide to adding Tailwind to Blazor or any .NET project.
tags: 
  - Blazor
  - Dotnet
  - CSS
  - FrontEnd
cover_image: https://mattferderer.com/cover/tailwind-with-blazor.png
canonical_url: https://mattferderer.com/tailwind-with-blazor
---

Here are my preferred ways you can add Tailwind to your Blazor app.

* [CDN](#adding-tailwind-with-a-cdn)
  * Pros: Quick & easy
  * Cons: Large file size, no customization or advanced features
* [PostCSS](#adding-tailwind-with-postcss)
  * Pros: Lots of customization and features
  * Cons: Requires NPM, more complicated

## Adding Tailwind with a CDN

The easiest way is to drop a link to the CDN build in the header of your `wwwroot/index.html` file.

```html
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
```

If you run into an error with the CSS not displaying due to "Resource interpreted as Stylesheet but transferred with MIME type text/plain" use a different CDN or a specific CSS version on unpkg.

```html
<link href="https://unpkg.com/tailwindcss@2.0.1/dist/tailwind.min.css" rel="stylesheet" />
```

## Adding Tailwind with PostCSS

If you can use Node Package Manager as part of your build processes, add a Package.json file to your project at the root level with `npm init` in the terminal.

Add Tailwind and dependencies.

```cmd
npm install tailwindcss postcss autoprefixer postcss-cli
```

Add a postcss.config.js file to the root level of your project with the following.

```js
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```

To customize the colors or other settings add a tailwind.config.js file to the root with the terminal command `npx tailwindcss init`. 

This creates an object that overrides the [default config object](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js). The [default config object](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js) is a great reference for how to override. In this case, we'll add a color to our config named brandBlue.

First, require the colors object from tailwind at the top of your config. Copy and paste the default colors from the [default config](https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js). The brandBlue color can now be added.

```js
//tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      brandBlue: '#2b59c0',
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.violet,
      pink: colors.pink,
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

Side note, instead of using the Tailwind's [color object](https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js), I recommend creating your own but using CSS variables. That makes it easier if you need to use a specific color in both Tailwind & custom CSS classes.

In your main css file drop these three lines in at the top.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

If you have any @import statements in your CSS, make sure they come first or PostCSS will get angry.

In `package.json` add a property to the scripts object.

```json
"scripts": {
  "buildcss": "postcss wwwroot/css/app.css -o wwwroot/css/app.min.css"
},
```

The first path is your source CSS and the second is where you want to output it. If you're using the Blazor template that comes with .NET, you will need to tweak the index.html file to use app.min.css instead of app.css. Feel free to change these CSS file names as you see fit.

Now you can run `npm run buildcss` in the terminal to generate your CSS.

Once done, you can search app.min.css for "brand". The CSS file should now have Tailwind CSS classes in it, including the brand color in multiple locations.

The file size has grown a bit now. It's still smaller than most images but to be good people, we can remove unused CSS.

In the tailwind.config.js file, update the purge property to include your Razor and HTML files. I'm also setting `enabled` to `true`. Without this set, `NODE_ENV` must be set to `production` for CSS to be removed.

```js
//tailwind.config.js
const colors = require('tailwindcss/colors');

module.exports = {
  purge: {
      enabled: true,
      content: [
          './**/*.html',
          '.**/*.razor'
      ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      brandBlue: '#2b59c0',
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.violet,
      pink: colors.pink,
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

Now Tailwind will use [PurgeCSS](https://purgecss.com/) to remove any Tailwind classes that do not exist in a Razor or HTML page in the project.

## Feedback Appreciated

I would love to hear in the comments your thoughts on using NPM with .NET. I'm trying to understand better where most .NET devs frontend stacks are.

*Originally posted on [mattferderer.com](https://mattferderer.com/tailwind-with-blazor).*