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

tailwind.config.js
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
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

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

Цвета

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

tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      gray: {
        100: '#f7fafc',
        // ...
        900: '#1a202c',
      },

      // ...
    }
  }
}

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

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

Интервал

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

tailwind.config.js
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, которое поддерживается всеми основными плагинами.

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

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


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

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

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

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

Например, если вы хотите добавить дополнительную контрольную точку, но сохранить существующие, вы можете расширить свойство screens:

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // Добавляет новую контрольную точку в дополнение к контрольным точкам по умолчанию
      screens: {
        '3xl': '1600px',
      }
    }
  }
}

Замена темы по умолчанию

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

tailwind.config.js
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
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
module.exports = {
  theme: {
    spacing: {
      // ...
    },
    backgroundSize: ({ theme }) => ({
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
      ...theme('spacing')
    })
  }
}

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

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

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

tailwind.config.js
module.exports = {
  theme: {
    fill: {
      gray: ({ theme }) => theme('colors.gray')
    }
  }
}

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

tailwind.config.js
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
module.exports = {
  theme: {
    opacity: {},
  }
}

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

tailwind.config.js
module.exports = {
  corePlugins: {
    opacity: false,
  }
}

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


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

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

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

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