====== Tailwind CSS ======


[[https://tailwindcss.com/|Tailwind CSS]] a utility-first CSS framework for rapidly building custom user interfaces, no UI components ready.


===== Component library for Tailwind CSS =====

Listing/Annuaire:

  * https://daisyui.com/
  * https://flowbite.com/docs/components
  * https://www.material-tailwind.com


Composants:

  * [[https://tailwindcomponents.com/component/responsive-bottom-navigation|Responsive Bottom Navigation]] By kenhyuwa

===== Tips =====

==== Debug breakpoints ====

doc: https://tailwindcss.com/docs/responsive-design

{{:informatique:web:css_debug_breakpoints.png?nolink&200|}}
<code html>
<div id="debug-css-breakpoints" class="sticky top-0 left-0 bg-orange-100 text-slate-400 text-sm font-mono">
    <div class="bg-inherit absolute">XS</div>
    <div class="bg-inherit absolute hidden sm:block">SM</div>
    <div class="bg-inherit absolute hidden md:block">MD </div>
    <div class="bg-inherit absolute hidden lg:block">LG </div>
    <div class="bg-inherit absolute hidden xl:block">XL </div>
    <div class="bg-inherit absolute hidden 2xl:block">2XL</div>
</div>
</code>