[[oktatas:web:front-end_framework|< Front-end framework]]

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

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A Tailwindcss =====

A Tailwindcss a komponenseihez nem nyújt komplett megoldást. A Tailwindui viszont pénzért kínálja ezeket.


Webhely:
  * https://tailwindcss.com/


UI komponensek:
  * https://tailwindui.com/


Komplett komponens megoldások:
  * https://flowbite.com/
===== Tailwind CSS kezdés =====

  npm install tailwindcss

===== Font család =====

  * font-sans
  * font-serif
  * font-mono

===== Szöveg méretezése =====

  * text-xs
  * text-sm
  * text-base
  * text-lg
  * text-xl
  * text-2xl
  * text-3xl
  * text-4xl
  * text-5xl
  * text-6xl
  * text-7xl
  * text-8xl
  * text-9xl

===== Font stílus =====

  * italic
  * not-italic

<code>
<p class="italic hover:not-italic">
  <!-- ... -->
</p>
</code>

===== Font vastagság =====


| font-thin |  font-weight: 100; |
| font-extralight | font-weight: 200; |
| font-light | font-weight: 300; |
| font-normal | font-weight: 400; |
| font-medium | font-weight: 500; |
| font-semibold | font-weight: 600; |
| font-bold | font-weight: 700; |
| font-extrabold | font-weight: 800; |
| font-black | font-weight: 900; |