Настройка темы

В разделе theme вашего файла 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 позволяет настраивать точки разрыва адаптивного дизайна в вашем проекте.

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    }
  }
}

Для получения дополнительной информации ознакомьтесь с документацией по настройке точек разрыва.

Цвета

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

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

      // ...
    }
  }
}

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

Для получения дополнительной информации ознакомьтесь с документацией по настройке цветов.

Отступы

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

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:

module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '3xl': '1600px',
      }
    }
  }
}

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

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

module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      '0': '0',
      '20': '0.2',
      '40': '0.4',
      '60': '0.6',
      '80': '0.8',
      '100': '1',
    }
  }
}

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

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

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

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:

module.exports = {
  theme: {
    spacing: {
      // ...
    },
    backgroundSize: ({ theme }) => ({
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
      ...theme('spacing')
    })
  }
}

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

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

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

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

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

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

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

const defaultTheme = require('tailwindcss/defaultTheme')

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

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

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

module.exports = {
  theme: {
    opacity: {},
  }
}

module.exports = {
  corePlugins: {
    opacity: false,
  }
}

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

Справочник по настройке

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

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