« Tailwind CSS » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(Page créée avec « Category:Web = Integration with Blazor = ») |
m (Nicolas a déplacé la page Tailwind vers Tailwind CSS) |
||
| (14 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
[[Category:Web]] | [[Category:Web]] | ||
= Links = | |||
* [https://tailwindcss.com Tailwind CSS] | |||
* [https://www.youtube.com/watch?v=GKbTgovP-VU Building beautiful Blazor apps with Tailwind CSS] | |||
= [https://tailwindcss.com/docs/margin Margin] = | |||
<kode lang='html'> | |||
<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> | |||
</kode> | |||
= [https://tailwindcss.com/docs/responsive-design Responsive Design] = | |||
<kode lang='html'> | |||
<head> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
</kode> | |||
{| class="wikitable wtp wtmono1" | |||
! Breakpoint prefix | |||
! Minimum width | |||
|- | |||
| sm || 640px | |||
|- | |||
| md || 768px | |||
|- | |||
| lg || 1024px | |||
|- | |||
| xl || 1280px | |||
|- | |||
| 2xl || 1536px | |||
|} | |||
<kode lang='html'> | |||
<div class="min-[320px]:mx-2 md:tw-mx-16">...</div> | |||
</kode> | |||
= Integration with Blazor = | = Integration with Blazor = | ||
== Installation == | |||
<kode lang='ps'> | |||
# from the root of your blazor project | |||
npx tailwindcss init -p | |||
# it will create the files tailwind.config.js and postcss.config.js | |||
</kode> | |||
== [https://tailwindcss.com/docs/configuration Configuration] == | |||
<filebox fn='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: [], | |||
} | |||
</filebox> | |||
<filebox fn='postcss.config.js'> | |||
module.exports = { | |||
plugins: { | |||
tailwindcss: {}, | |||
autoprefixer: {}, | |||
}, | |||
} | |||
</filebox> | |||
== Build == | |||
<filebox fn='wwwroot/css/tailwind.css'> | |||
@tailwind base; | |||
@tailwind components; | |||
@tailwind utilities; | |||
</filebox> | |||
<kode lang='ps'> | |||
npx tailwindcss -i ./wwwroot/css/tailwind.css -o ./wwwroot/css/tailwind.generated.css --watch | |||
</kode> | |||
== Integration == | |||
<filebox fn='Pages/_Host.cshtml'> | |||
<head> | |||
<link href="css/tailwind.generated.css" rel="stylesheet" /> | |||
</filebox> | |||
Dernière version du 9 janvier 2025 à 22:54
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" />
|
