« Tailwind CSS » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 50 : | Ligne 50 : | ||
npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/tailwind.generated.css --watch | npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/tailwind.generated.css --watch | ||
</kode> | </kode> | ||
== Integration == | |||
<filebox fn='Pages/_Host.cshtml'> | |||
<head> | |||
<link href="css/tailwind.generated.css" rel="stylesheet" /> | |||
</filebox> | |||
Version du 9 janvier 2025 à 19:00
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" />
|
