Работа з Tailwind у NextJS

У NextJS для стылізацыі можна выкарыстоўваць CSS фрэймворк Tailwind, які часта выкарыстоўваецца разам з React. Давайце паглядзім, як ім карыстацца.

Для работы са стылямі Tailwind патрэбны два файлы: tailwind.config.js і postcss.config.js. Паколькі пры ўстаноўцы праекта намі быў абраны пункт "выкарыстоўваць стылі Tailwind", гэтыя файлы ўжо згенераваны ў нашым праекце і знаходзяцца ў яго корані. Калі такіх файлаў няма, то вам трэба ўсталяваць Tailwind згодна афіцыйнай дакументацыі.

Давайце дадамо паўтлустае напісанне і жоўты колер тэксту з абзаца з дапамогай стыляў Tailwind. У Tailwind CSS дадатныя лікі, якія выкарыстоўваюцца ў класах для колераў абазначаюць інтэнсіўнасць або адценне колеру. Гэтыя лікі вар'іруюцца ад 50 да 900. Для тэксту абзаца абярэм сярэдняе адценне:

export default function Test() {
	return <p className="font-bold text-yellow-500">
		text text text
	</p>;
}

Паспрабуйце выкарыстоўваць Tailwind стылі ў вашым праекце.