Конфигурация темы

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

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

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    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, gap, inset, space и translate.

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

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

Остальная часть раздела 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(), которую вы можете использовать для поиска других значений в Вашей теме, используя точечную нотацию.

Например, вы можете сгенерировать утилиты fill для каждого цвета в Вашей цветовой палитре, указав тему theme('colors') в Вашей конфигурации fill:

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

Функция 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, так что лучше быть последовательным.

Добавление собственных ключей

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

Одним из примеров этого является добавление новых ключей для создания единого источника истины для значений, которые являются общими для нескольких основных плагинов. Например, вы можете извлечь общий объект positions, на который могут ссылаться плагины backgroundPosition и objectPosition:

// tailwind.config.js
module.exports = {
  theme: {
    positions: {
      bottom: 'bottom',
      center: 'center',
      left: 'left',
      'left-bottom': 'left bottom',
      'left-top': 'left top',
      right: 'right',
      'right-bottom': 'right bottom',
      'right-top': 'right top',
      top: 'top',
    },
    backgroundPosition: theme => theme('positions'),
    objectPosition: theme => theme('positions'),
  }
}

Другой пример - добавление нового ключа для ссылки внутри настраиваемого плагина. Например, если вы написали плагин filter для своего проекта, вы можете добавить ключ filters к Вашему объекту theme, на который ссылается плагин:

// tailwind.config.js
module.exports = {
  theme: {
    filters: {
      none: 'none',
      grayscale: 'grayscale(1)',
      invert: 'invert(1)',
      sepia: 'sepia(1)',
    }
  },
  plugins: [
    require('./plugins/filters')
  ],
}

Поскольку весь объект theme доступен в Вашем CSS с помощью функции темы, вы также можете добавить ключ, чтобы иметь возможность ссылаться на него в Вашем CSS.

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

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

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

Key	Description
`screens`	Адаптивные контрольные точки Вашего проекта
`colors`	Цветовая палитра вашего проекта
`spacing`	Шкала интервалов вашего проекта
`animation`	Значения для свойств `animation`
`backdropBlur`	Значения для свойств `backdrop-blur`
`backdropBrightness`	Значения для свойств `backdrop-brightness`
`backdropContrast`	Значения для свойств `backdrop-contrast`
`backdropGrayscale`	Значения для свойств `backdrop-grayscale`
`backdropHueRotate`	Значения для свойств `backdrop-hue-rotate`
`backdropInvert`	Значения для свойств `backdrop-invert`
`backdropOpacity`	Значения для свойств `backdrop-opacity`
`backdropSaturate`	Значения для свойств `backdrop-saturate`
`backdropSepia`	Значения для свойств `backdrop-sepia`
`backgroundColor`	Значения для свойств `background-color`
`backgroundImage`	Значения для свойств `background-image`
`backgroundOpacity`	Значения для свойств `background-opacity`
`backgroundPosition`	Значения для свойств `background-position`
`backgroundSize`	Значения для свойств `background-size`
`blur`	Значения для свойств `blur`
`brightness`	Значения для свойств `brightness`
`borderColor`	Значения для свойств `border-color`
`borderOpacity`	Значения для свойств `border-opacity`
`borderRadius`	Значения для свойств `border-radius`
`borderWidth`	Значения для свойств `border-width`
`boxShadow`	Значения для свойств `box-shadow`
`caretColor`	Значения для свойств `caret-color`
`contrast`	Значения для свойств `contrast`
`container`	Конфигурация плагина `container`
`content`	Значения для свойств `content`
`cursor`	Значения для свойств `cursor`
`divideColor`	Значения для свойств `divide-color`
`divideOpacity`	Значения для свойств `divide-opacity`
`divideWidth`	Значения для свойств `divide-width`
`dropShadow`	Значения для свойств `drop-shadow`
`fill`	Значения для свойств `fill`
`grayscale`	Значения для свойств `grayscale`
`hueRotate`	Значения для свойств `hue-rotate`
`invert`	Значения для свойств `invert`
`flex`	Значения для свойств `flex`
`flexGrow`	Значения для свойств `flex-grow`
`flexShrink`	Значения для свойств `flex-shrink`
`fontFamily`	Значения для свойств `font-family`
`fontSize`	Значения для свойств `font-size`
`fontWeight`	Значения для свойств `font-weight`
`gap`	Значения для свойств `gap`
`gradientColorStops`	Значения для свойств `gradient-color-stops`
`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`	Значения для свойств `keyframes`
`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`
`outline`	Значения для свойств `outline`
`padding`	Значения для свойств `padding`
`placeholderColor`	Значения для плагина `placeholderColor`
`placeholderOpacity`	Значения для плагина `placeholderOpacity`
`ringColor`	Значения для свойств `ring-color`
`ringOffsetColor`	Значения для свойств `ring-offset-color`
`ringOffsetWidth`	Значения для свойств `ring-offset-width`
`ringOpacity`	Значения для свойств `ring-opacity`
`ringWidth`	Значения для свойств `ring-width`
`rotate`	Значения для плагина `rotate`
`saturate`	Значения для свойств `saturate`
`scale`	Значения для плагина `scale`
`sepia`	Значения для свойств `sepia`
`skew`	Значения для плагина `skew`
`space`	Значения для плагина `space`
`stroke`	Значения для свойств `stroke`
`strokeWidth`	Значения для свойств `stroke-width`
`textColor`	Значения для свойств `text-color`
`textOpacity`	Значения для плагина `textOpacity`
`transformOrigin`	Значения для свойств `transform-origin`
`transitionDelay`	Значения для свойств `transition-delay`
`transitionDuration`	Значения для свойств `transition-duration`
`transitionProperty`	Значения для свойств `transition-property`
`transitionTimingFunction`	Значения для свойств `transition-timing-function`
`translate`	Значения для плагина `translate`
`width`	Значения для свойств `width`
`zIndex`	Значения для свойств `z-index`