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

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

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

tailwind.config.js

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

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

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

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

my-preset.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:

tailwind.config.js

/** @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 как объект, он будет объединен во всех конфигурациях.

my-preset.js

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

tailwind.config.js

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

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

my-preset.js

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

tailwind.config.js

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

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

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

tailwind.config.js

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

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

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

tailwind.config.js

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

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

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

tailwind.config.js

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

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

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

my-preset.js

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

tailwind.config.js

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

На этой странице