Tailwind UI
Domů Obsah Tailwind UI Headless UI
Vlastní UI Komponenty,
pomocí Tailwind CSS
HTML REACT VUE
Tailwind UI používá vnějšího Tailwind CSS, pro výrobu komponentů na různých webových aplikací. Jedná se o knihovnu pomáhajíci vytvářet stránku snáze v jejím vzhledu.

Nativní knihovna pro výrobu Dropdown Menu, Listboxů, ...


1. Co je to Tailwind UI
Tailwind UI pochází ze Tailwind CSS, což je takový Bootstrap na steroidech. Oproti Bootstrap své classy nativně tvoří za běhu, pomocí jednoduchých funkcí (například když pozřebujeme velikost fontu přesně 26rem, class se sama vytvoří). Využívá se jako CSS balíček, který pomáhá vytvářet klíčové komponenty po stránce vzhledové.

V našem případě budeme využívat Tailwind UI samotně, a poté s knihovnou Headless UI, která ulehčuje další komponenty potřebné na stránce, jako například Switche, Dropdown Menu, Listboxy a další.

Avšak Tailwind UI je rozšíření, které pomáhá tvořít právě UI elementy, pomocí komponentů. Společně s Tailwind CSS urychluje vývoj webových stránek a aplikací.
Tailwind UI by Steve Schoger for Tailwind Labs on Dribbble
2. Instalace přes NPM
Jen tak rychle jsme si shrnuli co to ten Tailwind UI vlastně je, a abychom jsme mohly ho v Reactu nebo VUE využít, musíme si ho nejprve nainstalovat do našeho nového projektu. 
npm install tailwindcss@latest
Ještě před tím než se ale vrhneme do programování, pokud nemáte alespoň nějaké znalosti z Bootstrap a nebo ostatních knihoven, doporučuje se naučit alespoň základní znalost class/prefixů. Pro přehled se můžete mrknout do dokumentace prefixů Tailwind CSS.
Pokračovat na React.js nebo VUE.js
3. Využití přes React.js
3.1. Instalace Tailwind UI
Tailwind CSS/UI se nám již nainstaloval. Pokud ale chceme do Tailwindu UI rozšířerní, doinstalujeme přídavné balíčky Headless UI a Heroicons přes NPM. Pokračujeme jako v minulé sekci a nainstalujeme si balíčky do našeho projektu. 
npm install @headlessui/react @heroicons/react
Podpora balíčků pouze od verzí React.js 16 a vyšší.

3.2 Vytváření komponentů
V React.js je každý příklady poskytován jako jedna komponenta. Na stránce https://headlessui.dev jsou tyto příklady více rozebírány, ale tady není snad potřeba je rezebírat. Přepokládejme tedy že si chceme vytvořit komponent vlastní.

Tyto komponenty se tvoří jen kvůli nepovinné duplicitě a usnadňuje tím běh stránky na uživatelské straně. Nemusí se tím pádem u uživatele počítač stresovat opakovanými elementy.

Například řekněme, že řešíme list komponentů. 
const people = [
  {
    name: 'Sheldon Cooper',
    email: 'sheldon.cooper@example.com',
    image:
      'path/to/img',
  },
  {
    name: 'Leonard Hofstadter',
    email: 'leonard.hofstadter@example.com',
    image:
      'path/to/img',
  },
  {
    name: 'Howard Wolowitz',
    email: 'howard,wolowitz@example.com',
    image:
      'path/to/img',
  },
  {
    name: 'Rajesh Koothrappali',
    email: 'rajesh.koothrappali@example.com',
    image:
      'path/to/img',
  }
]

export default function PeopleList() {
  return (
    <ul className="divide-y divide-gray-200">
      {people.map((person) => (
        <li key={person.email} className="py-4 flex">
          <img className="h-10 w-10 rounded-full" src={person.image} alt="" />
          <div className="ml-3">
            <p className="text-sm font-medium text-gray-900">{person.name}</p>
            <p className="text-sm text-gray-500">{person.email}</p>
          </div>
        </li>
      ))}
    </ul>
  )
}
Můžeme také dále kód rozdělit na menší části. Poté můžeme různé různě komponenty vyvolávat a míchat mezi sebou. Ulehčuje práci, když jeden a ten samý komponent, potřebujeme také někde jinde. 
function HockeyTeamItem({ team }) {
  return (
    <li className="py-4 flex">
      <img className="h-10 w-10 rounded-full" src={team.logo} alt="" />
      <div className="ml-3">
        <p className="text-sm font-medium text-gray-900">{team.name}</p>
        <p className="text-sm text-gray-500">{team.city}</p>
      </div>
    </li>
  )
}

export default function HockeyTeamList({ teams }) {
  return (
    <ul className="divide-y divide-gray-200">
      {teams.map((team) => <HockeyTeamItem key={team.id} team={team} />)}
    </ul>
  )
}
Tailwind UI si můžeme představit jako řadu blueprintů nebo konstant. Není ale povinností takhle kód psát, ale zamyslet se nad tím, kolikrát jednu část kódu využijeme.

Pokud ale potřebujete určitý komponent (Switch, Dropdown Menu, Tabs, ...), můžete využít stránku https://headlessui.dev/. Z nabídky si můžete vybrat snippety a upravit si podle potřeby.
4. Využití Headless UI
4.1. Co to je Headless UI
Teď si projdeme jak balíčky Tailwindu UI nám mohou ještě více pomoct. Začali jsme samotným Tailwindem a nezbývá nám, než už jenom projít některé komponenty Headles UI.

Headless UI je jedna z nejpouživanějších balíčků Tailwind UI. Tato knihovna se používá na klíčové komponenty stránky, jako například Dropdown Menu, Listboxy, Comboboxy, Switche, ...
Headless UI v1.5: The One With Comboboxes – Tailwind CSS
4.2. Jak využit Headless UI
Vrhneme se na stránku https://headlessui.dev/ a vybereme si komponent, který by jsme rádi využili. V našem případě si můžeme využít co chceme, ale pro tento případ si vybereme jenom Dropdown Menu.

Po zkopírování a aplikování kódu můžeme vidět něco takového.
Headless UI je balíček Tailwind UI, a proto je design řešen přes Tailwind CSS. To nám ulehčuje práci, pokud se rozhodneme nadesignovat nebo upravit komponent podle svého gusta.
Created by Jan Poláček 2022 ©