Пресеты

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

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

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

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

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

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

// Example preset
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:

module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // Customizations specific to this project would go here
  theme: {
    extend: {
      minHeight: {
        48: '12rem',
      }
    }
  },
}

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

// Example preset
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,
  },
}

module.exports = {
  presets: [
    require('./my-preset.js'),
  ],
  // This configuration will be merged
  corePlugins: {
    cursor: false
  }
}

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

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

module.exports = {
  presets: [
    require('./example-preset.js'),
  ],
  // This will replace the configuration in the preset
  corePlugins: ['float', 'padding', 'margin']
}

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

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

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

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

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

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

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

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

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

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

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

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

module.exports = {
  presets: [
    require('./my-preset.js')
  ],
  // ...
}