Voir la source de Tailwind CSS

[[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 =
== 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>