Links

Margin

<div class="mx-1">margin-left: 0.25rem; margin-right: 0.25rem; /* 4px */</div>
<div class="m-auto">margin: auto;</div>
<div class="m-0">margin: 0px;</div>

Responsive Design

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

Breakpoint prefix	Minimum width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

<div class="min-[320px]:mx-2 md:tw-mx-16">...</div>

Integration with Blazor

Installation

# from the root of your blazor project
npx tailwindcss init -p
# it will create the files tailwind.config.js and postcss.config.js

Configuration

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-', // prefix Tailwind classes to avoid conflicts with MudBlazor
  content: [
    './**/*.{razor,html}'

    './**/*.razor',          // Scan all Razor components
    './wwwroot/index.html',  // Include the entry point for Blazor
    './**/*.cshtml',         // If you use cshtml files
    './**/*.html',           // Include any static HTML
    './**/*.js',             // For JavaScript files
    './**/*.cs',             // If you dynamically generate classes
    './node_modules/mudblazor/**/*.js', // MudBlazor components
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Build

wwwroot/css/tailwind.css

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

npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/tailwind.generated.css --watch

Integration

Pages/_Host.cshtml

<head>
    <link href="css/tailwind.generated.css" rel="stylesheet" />