Using Tailwind CSS with Blazor

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

• CDN
  • Pros: Quick & easy
  • Cons: Large file size, no customization or advanced features
• 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.

<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.

<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.

npm install tailwindcss postcss autoprefixer postcss-cli

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

// 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. The default config object 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. The brandBlue color can now be added.

//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, 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.

@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.

"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.

//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 to remove any Tailwind classes that do not exist in a Razor or HTML page in the project.