Tailwind CSS
Начало работы - создаём next js проект npx create-next-app my-project Устанавливаем Tailwind npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Добавляем пути к файлам в tailwind.config.js module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', ], theme: { extend: {}, }, plugins: [], }; Добавляем директивы @tailwind в файл ./styles/globals.css @tailwind base; @tailwind components; @tailwind utilities; Примеры классов flex - флекс элемент justify-end, items-center - то же, что и justify-content: flex-end и align-items: center p-2 - паддинг 2 rem или 32рх my-5 - марджин по оси у 5 rem или 80рх mt-8 - марджин топ 8 rem или 128рх mb-5 - марджин боттом 5 rem или 80рх max-w-4xl - максимальная ширина 896px https://tailwindcss.com/docs/max-width bg-blue-500 - синий цвет фона text-white - белый цвет текста text-center - текст по центру text-xl - размер шрифта 1,25 rem text-2xl - размер шрифта