Práce s Tailwind v NextJS
V NextJS pro stylování lze použít CSS framework Tailwind, který se často používá společně s Reactem. Pojďme se podívat, jak jej používat.
Pro práci se styly
Tailwind jsou potřeba dva soubory:
tailwind.config.js a
postcss.config.js. Protože při instalaci
projektu jsme zvolili možnost "použít
styly Tailwind", tyto soubory jsou již vygenerovány
v našem projektu a
nacházejí se v jeho kořenu. Pokud takové soubory neexistují, je třeba nainstalovat Tailwind podle
oficiální dokumentace.
Pojďme přidat tučné písmo
a žlutou barvu textu odstavci pomocí stylů
Tailwind. V Tailwind CSS čísla,
používaná ve třídách pro barvy
označují intenzitu nebo odstín barvy.
Tato čísla se pohybují od 50 do
900. Pro text odstavce zvolme
střední odstín:
export default function Test() {
return <p className="font-bold text-yellow-500">
text text text
</p>;
}
Vyzkoušejte použít Tailwind styly ve vašem projektu.
