Предустановки

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

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-base')
  ],
  // ...
}

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

​Создание предустановки

Пресеты - это обычные объекты конфигурации Tailwind, принимающие ту же форму, что и конфигурация, которую вы добавляете в свой файл tailwind.config.js.

// Пример предустановки
module.exports = {
  theme: {
    colors: {
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
    },
    extend: {
      flexGrow: {
        2: '2',
        3: '3',
      },
      zIndex: {
        60: '60',
        70: '70',
        80: '80',
        90: '90',
        100: '100',
      },
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

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

Предполагая, что этот пресет был сохранен в ./my-preset.js, вы можете использовать его, добавив его в файл tailwind.config.js в вашем реальном проекте под ключом presets:

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // Здесь можно найти настройки, относящиеся к этому проекту
  theme: {
    extend: {
      minHeight: {
        48: '12rem',
      }
    }
  },
}

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

// Пример предустановки
module.exports = {
  presets: [],
  theme: {
    // ...
  },
  plugins: [
    // ...
  ],
}

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

​Подробная логика слияния

Конфигурации для конкретного проекта (те, что находятся в Вашем файле tailwind.config.js) объединяются с пресетами так же, как они объединяются с конфигурацией по умолчанию.

Следующие параметры в tailwind.config.js просто перезаписывают тот же параметр, если он присутствует в пресете:

• content
• darkMode
• prefix
• important
• variantOrder
• separator
• safelist

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

​Тема

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

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

​Пресеты

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

​Плагины

Массив plugins объединен между конфигурациями, чтобы позволить предустановке регистрировать плагины, а также позволяет вам добавлять дополнительные плагины на уровне проекта.

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

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

Параметр corePlugins ведет себя по-разному в зависимости от того, настроили ли вы его как объект или как массив.

Если вы сконфигурируете corePlugins как объект, он будет объединен во всех конфигурациях.

module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js'),
  ],
  // Эта конфигурация будет объединена
  corePlugins: {
    cursor: false
  }
}

Если вы сконфигурируете corePlugins как массив, он заменит любую конфигурацию corePlugins, предоставленную Вашим настроенным пресет(ом)(ами).

module.exports = {
  // ...
  corePlugins: {
    float: false,
  },
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // Это заменит конфигурацию в предустановке
  corePlugins: ['float', 'padding', 'margin']
}

​Расширение нескольких предустановок

Параметр presets представляет собой массив и может принимать несколько предустановок. Это полезно, если вы хотите разделить свои повторно используемые настройки на составляемые блоки, которые можно импортировать независимо.

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/tailwind-colors'),
    require('@acmecorp/tailwind-fonts'),
    require('@acmecorp/tailwind-spacing'),
  ]
}

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

Например, если обе эти конфигурации предоставляют пользовательскую цветовую палитру (и не используют extend), будет использоваться цветовая палитра из configuration-b:

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@acmecorp/configuration-a'),
    require('@acmecorp/configuration-b'),
  ]
}

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

Если вы хотите полностью отключить конфигурацию по умолчанию и начать без базовой конфигурации, установите presets в пустой массив:

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [],
  // ...
}

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

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

module.exports = {
  presets: [],
  // ...
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // ...
}