Способы стилизации: CSS Modules и Tailwind

Разбираем три рабочих способа стилизовать приложение на Next.js и когда какой брать.

В Next.js «из коробки» работают глобальный CSS, CSS Modules (локальные классы без конфликтов) и популярный утилитарный фреймворк Tailwind CSS.

Глобальные стили

Файл app/globals.css подключается в корневом layout и действует на весь сайт. Сюда кладут сброс отступов, базовую типографику, переменные:

:root {
  --accent: #2563eb;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

CSS Modules — локальные классы

Файл с расширением .module.css даёт классы, видимые только в своём компоненте. Next.js генерирует им уникальные имена, поэтому стили не «протекают» между компонентами:

/* Button.module.css */
.primary {
  background: var(--accent);
  color: white;
  padding: 8px 16px;
}

import styles from "./Button.module.css";

export default function Button() {
  return <button className={styles.primary}>Купить</button>;
}

Импортированный styles.primary превратится в уникальное имя вроде Button_primary__a1b2c — конфликт имён исключён.

Tailwind CSS — утилиты

Tailwind — набор маленьких классов-утилит, которые пишут прямо в разметке. Стили задаются без отдельного CSS-файла:

export default function Card() {
  return (
    <div className="p-4 rounded-lg bg-white shadow">
      <h2 className="text-lg font-bold">Заголовок</h2>
    </div>
  );
}

Tailwind включают флагом при создании проекта или ставят вручную; create-next-app умеет настроить его сразу.

Сравнение подходов

Способ	Плюс	Когда брать
Глобальный CSS	Просто, привычно	База: сброс, переменные, типографика
CSS Modules	Локальность, нет конфликтов	Компонентные стили без зависимостей
Tailwind	Скорость, единый дизайн	Быстрая разработка, дизайн-система

Уникальность имён модулей

Идею уникальных имён CSS Modules легко смоделировать на JS — добавим к классу хеш компонента:

function scopedName(component, className) {
  return component + "_" + className + "__" + "a1b2c";
}

console.log(scopedName("Button", "primary"));
console.log(scopedName("Card", "primary"));

Вывод:

Button_primary__a1b2c
Card_primary__a1b2c

Итог

Глобальный CSS — для базовых стилей всего сайта.
CSS Modules дают локальные классы без конфликтов имён.
Tailwind — утилитарные классы прямо в разметке, удобно для дизайн-системы.