Расширение и переопределение темы
Используйте theme.extend для добавления новых значений к стандартным, а theme — для полной замены стандартных значений; разберите практические примеры обоих подходов.
«Расширение и переопределение темы» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Tailwind CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Tailwind CSS Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Two Ways to Customize the Theme
When you want to add custom values to Tailwind's design system, you have two choices: extend the defaults or override them. Extending adds your values alongside Tailwind's built-in values. Overriding replaces Tailwind's built-in values with only what you provide. The wrong choice can silently remove utilities you depend on, so understanding the distinction is critical before modifying tailwind.config.js.
What Extending Means
When you place values inside theme.extend, Tailwind merges them with the corresponding default values. The result is the full default set plus your additions. For example, adding a custom color inside theme.extend.colors gives you all of Tailwind's built-in colors (red, blue, green, etc.) AND your custom color. Nothing is lost.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
// ADDED alongside default colors like red, blue, gray...
brand: {
light: '#818cf8',
DEFAULT: '#6366f1',
dark: '#4f46e5',
},
},
},
},
};
// Now you can use BOTH:
// bg-brand-DEFAULT, bg-brand-light, bg-brand-dark (custom)
// bg-blue-500, bg-red-400, bg-gray-100 (still available!)What Overriding Means
When you place values directly inside theme (outside extend), Tailwind replaces the entire default set with your values. This means all of Tailwind's built-in colors, spacings, font sizes, or whatever category you overrode are gone — only your values remain. This is intentional in some cases but destructive if done accidentally.
// tailwind.config.js
module.exports = {
theme: {
colors: {
// REPLACES all default colors! bg-blue-500 and bg-red-400 no longer exist.
brand: '#6366f1',
danger: '#ef4444',
success: '#22c55e',
},
},
};
// Only these work now:
// bg-brand, text-danger, border-success
// bg-blue-500 is GONE!When to Use Override
Override is appropriate when you want a minimal, fully custom design system with no Tailwind defaults leaking through. Design agencies building brand-specific sites sometimes override the entire color palette to ensure only brand colors are usable. Override is also useful for font families, where you might want only your chosen fonts available, not the built-in font stacks.
// Intentional override: only use brand fonts
module.exports = {
theme: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace'],
},
// No extend: we intentionally remove 'serif' font family
},
};Extending Colors with Custom Shades
The most common use of theme.extend is adding custom colors with a full shade scale. Define your brand color as an object with shade numbers from 50 to 950, just like Tailwind's built-in palette. This makes your custom color usable with all Tailwind color utilities — text-brand-500, bg-brand-100, border-brand-800 — and plays nicely with the opacity modifier syntax.
// 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',
},
},
},
},
};Extending Spacing
Tailwind's default spacing scale goes up to 96 (24rem). If your designs use larger values, add them in theme.extend.spacing. These new spacing values automatically become available across all spacing-related utilities: m-*, p-*, w-*, h-*, gap-*, inset-*, and more — without any extra configuration.
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'128': '32rem', // w-128, h-128, m-128, p-128...
'144': '36rem',
'160': '40rem',
'4.5': '1.125rem', // fine-grained values
},
},
},
};Extending Font Sizes
Font size utilities in Tailwind are defined as tuples — a font size AND a corresponding line height. When you add a custom font size in theme.extend.fontSize, you can provide just the size (and Tailwind assigns a default line height) or an array with both size and line height explicitly. This keeps your custom text sizes as predictable as Tailwind's built-ins.
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'2xs': ['0.625rem', { lineHeight: '1rem' }], // text-2xs
'3xs': ['0.5rem', { lineHeight: '0.875rem' }], // text-3xs
'hero': ['4.5rem', { lineHeight: '1', letterSpacing: '-0.02em' }],
},
},
},
};Extending Breakpoints
Tailwind's five default breakpoints cover most use cases, but some projects need additional screen sizes. Add custom breakpoints in theme.extend.screens to get new responsive prefixes. You can add smaller breakpoints below sm or larger ones above 2xl. All responsive utilities automatically gain your new prefix without any additional configuration.
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'xs': '475px', // xs:flex, xs:text-lg...
'3xl': '1920px', // 3xl:grid-cols-6...
'tall': { 'raw': '(min-height: 800px)' }, // height-based
},
},
},
};Referencing Theme Values Inside Config
Sometimes you want to reference another theme value when defining a new value — for example, deriving a shadow color from your brand color. Tailwind provides a theme() helper function that you can use inside the config to reference any theme value by path. Use it as a function that receives the theme resolver as its argument.
// tailwind.config.js
module.exports = {
theme: {
extend: {
boxShadow: {
// Reference brand color in a shadow definition
'brand': (theme) => '0 4px 14px 0 ' + theme('colors.brand.500') + '40',
},
// Or use the CSS theme() function syntax
colors: {
'card-bg': 'rgb(var(--color-card-bg) / <alpha-value>)',
},
},
},
};Override the Default Color Palette Safely
If you want to use only your custom colors but still want Tailwind's utility-generating machinery, override theme.colors while explicitly re-importing the categories you still want. Use Tailwind's colors export to bring back specific color groups while discarding others. This gives you a tailored palette without manually redefining every shade.
const colors = require('tailwindcss/colors');
module.exports = {
theme: {
colors: {
// Keep these from the default palette
transparent: 'transparent',
current: 'currentColor',
white: colors.white,
black: colors.black,
gray: colors.slate, // rename slate to gray
// Add your own
brand: {
500: '#6366f1',
600: '#4f46e5',
},
},
},
};Spotting Accidental Overrides
Accidental overrides are easy to introduce and hard to debug — you add a value and suddenly other utilities stop working. The symptom is classes that used to work returning no styles in the browser. Inspect your built CSS to see if the expected utilities are present. If bg-blue-500 is missing from the output, check whether you inadvertently placed your colors inside theme.colors instead of theme.extend.colors.
// BUG: This accidentally overrides ALL colors
module.exports = {
theme: {
colors: { brand: '#6366f1' }, // bg-blue-500 gone!
},
};
// FIX: Use extend
module.exports = {
theme: {
extend: {
colors: { brand: '#6366f1' }, // bg-blue-500 still works!
},
},
};Quick Check
Test your understanding of extending vs overriding the Tailwind theme.
Lesson Recap
In this lesson you learned: theme.extend merges new values with Tailwind's defaults — nothing is lost, direct theme overrides replace the entire default category and should be used intentionally, and you can reference existing theme values using the theme() function inside your config. Next up we add official Tailwind plugins to enhance our project.
Часто задаваемые вопросы
Урок «Расширение и переопределение темы» бесплатный?
Да — полный текст урока «Расширение и переопределение темы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Расширение и переопределение темы»?
Используйте theme.extend для добавления новых значений к стандартным, а theme — для полной замены стандартных значений; разберите практические примеры обоих подходов. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?
Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Расширение и переопределение темы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?
Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Анатомия tailwind.config.js
- Пути к содержимому и удаление неиспользуемых классов
- Расширение и переопределение темы
- Добавление и настройка плагинов