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:

app/test/page.jsxexport default function Test() {
  return <p className="font-bold text-yellow-500">
    text text text
  </p>;
}