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

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

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

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

​Цвета

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

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

      // ...
    }
  }
}

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

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

​Интервал

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

/** @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, который может изменять шрифт, используемый в элементе:

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

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

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

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

/** @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:

/** @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 по умолчанию для этого ключа, поэтому в приведенном выше примере ни одна из утилит непрозрачности по умолчанию не будет сгенерирована.

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

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

/** @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:

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

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

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

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

/** @type {import('tailwindcss').Config} */
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.

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

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

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

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

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

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