Tailwind CSS

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: {}, }, }