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

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Мы предоставляем разумную тему по умолчанию с очень щедрым набором значений, чтобы вы могли начать, но не боится его изменить или продлить; вам предлагается настроить его настолько, насколько вам нужно, чтобы он соответствовал целям вашего дизайна.


Структура темы

Объект theme содержит ключи для screens, colors и spacing, а также ключ для каждого настраиваемого основного плагина.

Полный список смотрите в справке по настройке темы или теме по умолчанию для получения полного списка опций темы.

Экраны

Ключ screens позволяет вам настраивать адаптивные контрольные точки в Вашем проекте.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

Чтобы узнать больше, смотрите документацию по настройке контрольной точки.

Цвета

Ключ colors позволяет вам настроить глобальную цветовую палитру для Вашего проекта.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

По умолчанию эти цвета наследуются всеми базовыми плагинами, связанными с цветом, такими как backgroundColor, borderColor, textColor и другими.

Чтобы узнать больше, смотрите документацию по настройке цвета.

Интервал

Ключ spacing позволяет вам настроить глобальную шкалу интервалов и размеров для Вашего проекта.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      9: '2.25rem',
      10: '2.5rem',
      11: '2.75rem',
      12: '3rem',
      14: '3.5rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      28: '7rem',
      32: '8rem',
      36: '9rem',
      40: '10rem',
      44: '11rem',
      48: '12rem',
      52: '13rem',
      56: '14rem',
      60: '15rem',
      64: '16rem',
      72: '18rem',
      80: '20rem',
      96: '24rem',
    },
  }
}

По умолчанию, эти значения наследуются элементами плагинов ядра padding, margin, width, height, maxHeight, flex-basis, gap, inset, space, translate, scrollMargin, scrollPadding и textIndent.

Чтобы узнать больше смотрите документацию по настройке интервалов.

Основные плагины

Остальная часть раздела theme используется для настройки того, какие значения доступны для каждого отдельного основного плагина.

Например, ключ borderRadius позволяет вам настроить, какие утилиты радиуса границы будут сгенерированы:

module.exports = {
  theme: {
    borderRadius: {
      'none': '0',
      'sm': '.125rem',
      DEFAULT: '.25rem',
      'lg': '.5rem',
      'full': '9999px',
    },
  }
}

Ключи определяют суффикс для сгенерированных классов, а значения определяют значение фактического объявления CSS.

Приведенный выше пример конфигурации borderRadius генерирует следующие классы CSS:

.rounded-none { border-radius: 0 }
.rounded-sm   { border-radius: .125rem }
.rounded      { border-radius: .25rem }
.rounded-lg   { border-radius: .5rem }
.rounded-full { border-radius: 9999px }

Вы заметите, что использование ключа DEFAULT в конфигурации темы привело к созданию класса rounded без суффикса. Это обычное соглашение в Tailwind, которое поддерживается всеми основными плагинами.

Чтобы узнать больше о настройке конкретного основного плагина, посетите документацию по этому плагину.

Полную справку о доступных свойствах темы и их значениях по умолчанию смотрите в конфигурацию темы по умолчанию.


Настройка темы по умолчанию

По умолчанию ваш проект автоматически наследует значения из конфигурации темы по умолчанию. Если вы хотите настроить тему по умолчанию, у вас есть несколько вариантов в зависимости от ваших целей.

Расширение темы по умолчанию

Если вы хотите сохранить значения по умолчанию для параметра темы, но также добавить новые значения, добавьте свои расширения под ключом theme.extend в файле конфигурации. Значения этого ключа объединяются с существующими значениями theme и автоматически становятся доступными как новые классы, которые вы можете использовать.

В качестве примера здесь мы расширяем свойство fontFamily, добавляя класс font-display, который может изменять шрифт, используемый в элементе:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        display: 'Oswald, ui-serif', // Добавляет новый класс `font-display`
      }
    }
  }
}

После добавления этого в вашу тему вы можете использовать его так же, как и любую другую утилиту семейства шрифтов:

<h1 class="font-display">
  Здесь используется шрифт Oswald
</h1>

В некоторых случаях свойства сопоставляются с вариантами, которые можно поместить перед утилитой для условного применения ее стилей. Например, чтобы добавить размер экрана 3xl, который работает так же, как существующие адаптивные экраны, добавьте свойство под ключом screens:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px', // Добавляет новый вариант экрана `3xl:`
      }
    }
  }
}

Благодаря этому дополнению стал доступен новый размер экрана 3xl наряду с существующими адаптивными вариантами, такими как sm, md, lg и т. д. Вы можете использовать этот новый вариант, поместив его перед классом утилиты:

<blockquote class="text-base md:text-md 3xl:text-lg">
  Ой, мне пора в Интернет, я все опаздываю!
</blockquote>

Переопределение темы по умолчанию

Чтобы переопределить параметр в теме по умолчанию, добавьте свои переопределения непосредственно в раздел theme Вашего tailwind.config.js:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // Заменяет все значения непрозрачности `opacity` по умолчанию
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

Это полностью заменит конфигурацию Tailwind по умолчанию для этого ключа, поэтому в приведенном выше примере ни одна из утилит непрозрачности по умолчанию не будет сгенерирована.

Любые ключи, которые вы не предоставляете, будут унаследованы от темы по умолчанию, поэтому в приведенном выше примере конфигурация темы по умолчанию для таких вещей, как цвета, интервал, радиус границы, положение фона и т.д. Будет сохранена.

Конечно, вы можете как переопределить некоторые части темы по умолчанию, так и расширить другие части темы по умолчанию в той же конфигурации:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    },
    extend: {
      screens: {
        '3xl': '1600px',
      }
    }
  }
}

Ссылка на другие значения

Если вам нужно сослаться на другое значение в вашей теме, вы можете сделать это, указав закрытие вместо статического значения. Замыкание получит объект, который включает функцию theme(), которую вы можете использовать для поиска других значений в вашей теме, используя точечную нотацию.

Например, вы можете сгенерировать утилиты background-size для каждого значения в вашей шкале интервалов, указав тему theme('spacing') в вашей конфигурации backgroundSize:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    spacing: {
      // ...
    },
    backgroundSize: ({ theme }) => ({
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
      ...theme('spacing')
    })
  }
}

Функция theme() пытается найти значение, которое вы ищете, в полностью объединенном объекте темы, чтобы он мог ссылаться на Ваши собственные настройки, а также на значения темы по умолчанию. Он также работает рекурсивно, поэтому до тех пор, пока в конце цепочки есть статическое значение, оно сможет разрешить искомое значение.

Обратите внимание, что вы можете использовать этот вид закрытия только с ключами темы верхнего уровня, а не с ключами внутри каждого раздела.

Вы не можете использовать функции для отдельных значений

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fill: {
      gray: ({ theme }) => theme('colors.gray')
    }
  }
}

Используйте функции для ключей темы верхнего уровня

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    fill: ({ theme }) => ({
      gray: theme('colors.gray')
    })
  }
}

Ссылка на тему по умолчанию

Если вы по какой-либо причине хотите указать значение в теме по умолчанию, вы можете импортировать его из tailwindcss/defaultTheme.

Один из примеров того, где это полезно, - это если вы хотите добавить семейство шрифтов в один из стеков шрифтов Tailwind по умолчанию:

tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

Отключение всего основного плагина

Если вы не хотите создавать какие-либо классы для определенного основного плагина, лучше установить для этого плагина значение false в конфигурации corePlugins, чем предоставлять пустой объект для этого ключа в конфигурации theme.

Не назначайте пустой объект в конфигурации Вашей темы

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    opacity: {},
  }
}

Отключите плагин в конфигурации corePlugins

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    opacity: false,
  }
}

Конечный результат тот же, но поскольку многие плагины ядра не предоставляют никакой конфигурации, их в любом случае можно отключить только с помощью corePlugins, так что лучше быть последовательным.


Ссылка на конфигурацию

За исключением screens, colors и spacing, все ключи в объекте theme соответствуют одному из основных плагинов Tailwind. Поскольку многие плагины отвечают за свойства CSS, которые принимают только статический набор значений (например, float), обратите внимание, что не каждый плагин имеет соответствующий ключ в объекте theme.

Все эти ключи также доступны под ключом theme.extend для включения расширения темы по умолчанию.

КлючОписание
accentColorЗначения для свойств accent-color
animationЗначения для свойств animation
ariaЗначения для свойств aria
aspectRatioЗначения для свойств aspect-ratio
backdropBlurЗначения для плагина backdropBlur
backdropBrightnessЗначения для плагина backdropBrightness
backdropContrastЗначения для плагина backdropContrast
backdropGrayscaleЗначения для плагина backdropGrayscale
backdropHueRotateЗначения для плагина backdropHueRotate
backdropInvertЗначения для плагина backdropInvert
backdropOpacityЗначения для плагина backdropOpacity
backdropSaturateЗначения для плагина backdropSaturate
backdropSepiaЗначения для плагина backdropSepia
backgroundColorЗначения для свойств background-color
backgroundImageЗначения для свойств background-image
backgroundOpacityЗначения для свойств background-opacity
backgroundPositionЗначения для свойств background-position
backgroundSizeЗначения для свойств background-size
blurЗначения для плагина blur
borderColorЗначения для свойств border-color
borderOpacityЗначения для плагина borderOpacity
borderRadiusЗначения для свойств border-radius
borderSpacingЗначения для свойств border-spacing
borderWidthЗначения для плагина borderWidth
boxShadowЗначения для свойств box-shadow
boxShadowColorЗначения для плагина boxShadowColor
brightnessЗначения для плагина brightness
caretColorЗначения для свойств caret-color
colorsЦветовая палитра вашего проекта
columnsЗначения для свойств columns
containerКонфигурация плагина container
contentЗначения для свойств content
contrastЗначения для плагина contrast
cursorЗначения для свойств cursor
divideColorЗначения для плагина divideColor
divideOpacityЗначения для плагина divideOpacity
divideWidthЗначения для плагина divideWidth
dropShadowЗначения для плагина dropShadow
fillЗначения для плагина fill
flexЗначения для свойств flex
flexBasisЗначения для свойств flex-basis
flexGrowЗначения для свойств flex-grow
flexShrinkЗначения для свойств flex-shrink
fontFamilyЗначения для свойств font-family
fontSizeЗначения для свойств font-size
fontWeightЗначения для свойств font-weight
gapЗначения для свойств gap
gradientColorStopsЗначения для плагина gradientColorStops
gradientColorStopPositionsЗначения для свойств gradient-color-stop-positions
grayscaleЗначения для плагина grayscale
gridAutoColumnsЗначения для свойств grid-auto-columns
gridAutoRowsЗначения для свойств grid-auto-rows
gridColumnЗначения для свойств grid-column
gridColumnEndЗначения для свойств grid-column-end
gridColumnStartЗначения для свойств grid-column-start
gridRowЗначения для свойств grid-row
gridRowEndЗначения для свойств grid-row-end
gridRowStartЗначения для свойств grid-row-start
gridTemplateColumnsЗначения для свойств grid-template-columns
gridTemplateRowsЗначения для свойств grid-template-rows
heightЗначения для свойств height
hueRotateЗначения для плагина hueRotate
insetЗначения свойств top, right, bottom и left
invertЗначения для плагина invert
keyframesЗначения ключевых кадров, используемые в плагине animation
letterSpacingЗначения для свойств letter-spacing
lineHeightЗначения для свойств line-height
listStyleTypeЗначения для свойств list-style-type
listStyleImageЗначения для свойств list-style-image
marginЗначения для свойств margin
lineClampЗначения для свойств line-clamp
maxHeightЗначения для свойств max-height
maxWidthЗначения для свойств max-width
minHeightЗначения для свойств min-height
minWidthЗначения для свойств min-width
objectPositionЗначения для свойств object-position
opacityЗначения для свойств opacity
orderЗначения для свойств order
outlineColorЗначения для свойств outline-color
outlineOffsetЗначения для свойств outline-offset
outlineWidthЗначения для свойств outline-width
paddingЗначения для свойств padding
placeholderColorЗначения для плагина placeholderColor
placeholderOpacityЗначения для плагина placeholderOpacity
ringColorЗначения для плагина ringColor
ringOffsetColorЗначения для плагина ringOffsetColor
ringOffsetWidthЗначения для плагина ringOffsetWidth
ringOpacityЗначения для плагина ringOpacity
ringWidthЗначения для плагина ringWidth
rotateЗначения для плагина rotate
saturateЗначения для плагина saturate
scaleЗначения для плагина scale
screensАдаптивные контрольные точки вашего проекта
scrollMarginЗначения для свойств scroll-margin
scrollPaddingЗначения для свойств scroll-padding
sepiaЗначения для плагина sepia
skewЗначения для плагина skew
spaceЗначения для плагина space
spacingМасштаб интервалов вашего проекта
strokeЗначения для свойств stroke
strokeWidthЗначения для свойств stroke-width
supportsЗначения для свойств supports
dataЗначения для свойств data
textColorЗначения свойства color
textDecorationColorЗначения для свойств text-decoration-color
textDecorationThicknessЗначения для свойств text-decoration-thickness
textIndentЗначения для свойств text-indent
textOpacityЗначения для плагина textOpacity
textUnderlineOffsetЗначения для свойств text-underline-offset
transformOriginЗначения для свойств transform-origin
transitionDelayЗначения для свойств transition-delay
transitionDurationЗначения для свойств transition-duration
transitionPropertyЗначения для свойств transition-property
transitionTimingFunctionЗначения для свойств transition-timing-function
translateЗначения для плагина translate
sizeЗначения для свойств size
widthЗначения для свойств width
willChangeЗначения для свойств will-change
zIndexЗначения для свойств z-index