Plynulé změny

Když teď na tlačítko najedete myší, pozadí se změní naráz. Hezčí je, když jedna barva během krátké chvilky plynule přejde do druhé. V CSS se tomu říká přechod (anglicky transition). Přechody v kurzu CSS nebyly, v Tailwindu na ně ale stačí dvě třídy:

.transition-colors {
	transition-property: color, background-color, border-color /* a několik dalších */;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

.duration-200 {
	transition-duration: 200ms;
}

Třída transition-colors říká prohlížeči, které vlastnosti se mají měnit postupně: barva textu, pozadí, rámečku a několik dalších. transition-timing-function určuje průběh změny: tady změna rychle nabere tempo a pak pozvolna zpomalí, což působí přirozeně. A transition-duration určuje, jak dlouho změna trvá: výchozí hodnota je 150 milisekund (ms, tisícin sekundy).

Třída duration-200 změní dobu trvání na 200 ms. Stejně fungují i jiné doby: duration-100, duration-300, duration-500 a tak dále. Změny dlouhé 150 až 300 ms působí svižně, a přitom jsou ještě vidět.

Třída transition funguje jako transition-colors, ale týká se i dalších vlastností, například opacity (průhlednost) a box-shadow (stín). Když se mění jen barvy, stačí transition-colors.

Všimněte si, že třídy pro přechod nemají žádnou variantu. Přechod patří k samotnému tlačítku, takže proběhne pokaždé, když se pozadí změní: při najetí myší i při jejím odsunutí. S hover:transition-colors by barva plynule přešla jen při najetí a po odsunutí myši by naráz skočila zpátky.