Tailwind CSS Academy · Урок

Добавление собственных цветов

«Добавление собственных цветов» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Tailwind CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Tailwind CSS Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Why Custom Colors Matter

Every real-world project has a brand identity with specific colors that do not exist in Tailwind's default palette. Adding your brand colors to Tailwind's config unlocks the full utility class API for those colors — you can use them with bg-*, text-*, border-*, ring-*, shadow-*, and every other color utility. Your custom colors also work with opacity modifiers and dark mode variants automatically.

Adding a Simple Custom Color

The simplest way to add a custom color is to provide a single hex value with a key name in theme.extend.colors. Tailwind generates a utility class for that exact color. The key becomes part of the class name: a key of brand creates bg-brand, text-brand, border-brand, etc. Single-value colors do not support shade suffixes like brand-500.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#6366f1',
        accent: '#f59e0b',
        danger: '#ef4444',
      },
    },
  },
};

<!-- Usage -->
<div class="bg-brand text-white">Brand background</div>
<span class="text-accent font-semibold">Accent text</span>

Adding a Full Shade Scale

For colors that need variation — lighter and darker versions for hover states, backgrounds, and text — define a full shade scale as a nested object. Use the standard Tailwind shade numbers (50, 100, 200, ... 900, 950). This unlocks utilities like bg-brand-100 for subtle backgrounds, bg-brand-500 for the main color, and bg-brand-900 for dark accents.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eef2ff',
          100: '#e0e7ff',
          200: '#c7d2fe',
          300: '#a5b4fc',
          400: '#818cf8',
          500: '#6366f1',
          600: '#4f46e5',
          700: '#4338ca',
          800: '#3730a3',
          900: '#312e81',
          950: '#1e1b4b',
        },
      },
    },
  },
};

Generating Color Shades Automatically

Manually writing ten hex values for every brand color is tedious. Tools like uicolors.app, palettte.app, or the Tailwind team's online color shades generator take a single base color and produce a full 50-950 scale with perceptually even gradations. Many design tools like Figma also have plugins that export color palettes directly in Tailwind config format.

// Generated from uicolors.app or similar tool
// Base color: #6366f1 (indigo brand)
colors: {
  brand: {
    '50': '#eef2ff',
    '100': '#e0e7ff',
    '200': '#c7d2fe',
    '300': '#a5b4fc',
    '400': '#818cf8',
    '500': '#6366f1',
    '600': '#4f46e5',
    '700': '#4338ca',
    '800': '#3730a3',
    '900': '#312e81',
    '950': '#1e1b4b'
  }
}

The DEFAULT Key

Inside a color scale object, you can add a DEFAULT key to set the bare utility class (without a shade number) to a specific shade. For example, setting DEFAULT: '#6366f1' means bg-brand renders as the 500 shade. This is useful when your design uses a specific primary shade most often and you want a short class name for it without giving up the full scale.

// tailwind.config.js
colors: {
  brand: {
    DEFAULT: '#6366f1',  // bg-brand = #6366f1 (same as brand-500)
    light: '#818cf8',    // bg-brand-light
    dark: '#4338ca',     // bg-brand-dark
    50: '#eef2ff',       // bg-brand-50
    500: '#6366f1',      // bg-brand-500 (same as DEFAULT)
    900: '#312e81',      // bg-brand-900
  },
}

Using CSS Variables for Colors

For colors that change at runtime — like theme colors toggled by user preference — define them as CSS custom properties and reference those variables in your Tailwind config. Use the <alpha-value> placeholder to enable opacity modifier support (bg-brand/50). This pattern is the foundation of multi-theme design systems built on Tailwind.

/* In your CSS */
:root {
  --color-brand: 99 102 241;  /* RGB values for opacity support */
}

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: 'rgb(var(--color-brand) / <alpha-value>)',
      },
    },
  },
};

<!-- Now bg-brand/50 works correctly -->
<div class="bg-brand/50">50% opacity brand background</div>

Referencing Tailwind's Default Colors

Sometimes you want to rename or alias existing Tailwind colors — for example, using primary as an alias for indigo so your components stay brand-agnostic. Import Tailwind's color object and use it in your config to reference any built-in color by name. This keeps your palette DRY: change the alias once to update all component classes that use primary.

const colors = require('tailwindcss/colors');

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: colors.indigo,   // bg-primary-500 = bg-indigo-500
        secondary: colors.violet, // bg-secondary-500 = bg-violet-500
        neutral: colors.slate,    // text-neutral-700 = text-slate-700
      },
    },
  },
};

Semantic Color Naming

Instead of naming colors by their hue (indigo, violet), name them by their semantic role in your design (primary, secondary, success, warning, error). Semantic naming makes your components resilient to rebrand: if the brand color changes from indigo to teal, you update one config entry and all components automatically reflect the change.

// Semantic color system
module.exports = {
  theme: {
    extend: {
      colors: {
        primary:   { 50: '#eef2ff', 500: '#6366f1', 900: '#312e81' },
        secondary: { 50: '#f5f3ff', 500: '#8b5cf6', 900: '#2e1065' },
        success:   { 50: '#f0fdf4', 500: '#22c55e', 900: '#052e16' },
        warning:   { 50: '#fffbeb', 500: '#f59e0b', 900: '#451a03' },
        error:     { 50: '#fef2f2', 500: '#ef4444', 900: '#450a0a' },
      },
    },
  },
};

Using Custom Colors in Dark Mode

Custom colors work with dark mode variants the same way as built-in colors. Pair light-shade custom colors for light mode with dark-shade variants for dark mode. If you are using CSS variables for your colors, you can change the variable value in the .dark selector and all utilities that reference the variable update automatically — no extra dark: classes needed.

<!-- Custom color with dark mode -->
<div class="bg-brand-50 dark:bg-brand-950 text-brand-900 dark:text-brand-100 p-6 rounded-xl">
  <h2 class="text-brand-700 dark:text-brand-300 font-bold">Brand Card</h2>
  <p class="text-brand-600 dark:text-brand-400">Content that adapts to dark mode</p>
</div>

Opacity Modifier with Custom Colors

Custom colors defined as hex values also support Tailwind's opacity modifier syntax (bg-brand-500/75) when Tailwind can convert the hex to an RGB representation. Colors defined as CSS variables with the <alpha-value> placeholder work even better, giving you precise control over opacity at every use site without needing separate utility classes.

<!-- Opacity modifier with custom hex colors -->
<div class="bg-brand-500/20 border border-brand-500/30 text-brand-700">
  Subtle brand-tinted background
</div>

<div class="shadow-brand-500/50 shadow-xl">
  Brand-colored shadow
</div>

<button class="bg-brand-600 hover:bg-brand-600/90 text-white px-4 py-2 rounded-lg">
  Slightly transparent on hover
</button>

Testing Custom Colors in HTML

After adding custom colors to your config, verify they work by running Tailwind's build and using the classes in your HTML. Check both the generated CSS file (your classes should appear) and the visual output in the browser. Also test dark mode variants, opacity modifiers, and hover states to ensure the full suite of derivative utilities works correctly with your custom colors.

<!-- Test all derivative utilities work -->
<div class="p-4 space-y-2">
  <div class="bg-brand-100 text-brand-900 p-2 rounded">bg-brand-100</div>
  <div class="bg-brand-500 text-white p-2 rounded">bg-brand-500</div>
  <div class="bg-brand-900 text-brand-100 p-2 rounded">bg-brand-900</div>
  <div class="bg-brand-500/50 text-brand-900 p-2 rounded">bg-brand-500/50 (opacity)</div>
  <div class="border-2 border-brand-500 text-brand-700 p-2 rounded">border-brand-500</div>
</div>

Quick Check

Test your understanding of adding custom colors to Tailwind CSS.

Lesson Recap

In this lesson you learned: add custom colors in theme.extend.colors as single hex values or full shade scales, use semantic names like primary and error instead of hue names for resilient design, and define colors as CSS variables with <alpha-value> for opacity modifier support. Next up we add custom font families from Google Fonts and local sources.

Часто задаваемые вопросы

Урок «Добавление собственных цветов» бесплатный?

Да — полный текст урока «Добавление собственных цветов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Добавление собственных цветов»?

Определяйте фирменные цвета как пользовательские свойства CSS или шестнадцатеричные значения в конфигурации, расширяйте палитру собственными оттенками и используйте их с любой utility-командой цвета. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?

Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Добавление собственных цветов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?

Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Tailwind CSS Academy