Генератор конфигурации Tailwind

Составьте файл tailwind.config.js с вашими фирменными цветами, шрифтами и кастомными отступами, не написав ни строчки JavaScript вручную. Обработка 100% локально — ничего не отправляется на сервер.

Пример:

Тёмный режим

Пути контента (content)Один шаблон файла в строке.

Пользовательские цвета

Пользовательские шрифты

Пользовательские отступы

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        brand: '#2563eb',
        accent: '#f59e0b',
      },
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '18': '4.5rem',
      },
    },
  },
  plugins: [],
}

Как это работает

Вместо ручного написания объекта конфигурации Tailwind CSS, укажите свои фирменные цвета, семейства шрифтов и дополнительные отступы в формах выше: инструмент в реальном времени собирает валидный файл tailwind.config.js с правильно структурированной секцией theme.extend, готовый заменить ваш существующий файл.

Почему использовать `theme.extend`, а не `theme` напрямую?

Размещение ваших дополнений в theme.extend позволяет сохранить все значения Tailwind по умолчанию (стандартные цвета, размеры, отступы), добавляя при этом свои собственные значения; прямое переопределение theme заменило бы значения по умолчанию целиком, что редко желательно.

Что означает выбор тёмного режима "class" или "media"?

С class тёмный режим активируется добавлением класса dark на родительский элемент (обычно <html>), что позволяет переключать его вручную через JavaScript; с media Tailwind автоматически следует системной настройке пользователя без возможности ручного управления.

Файл конфигурации генерируется прямо в вашем браузере, без отправки данных на сервер.

Генератор конфигурации Tailwind

Как это работает

Почему использовать theme.extend, а не theme напрямую?

Что означает выбор тёмного режима "class" или "media"?

Почему использовать `theme.extend`, а не `theme` напрямую?