Конфигурация

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

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

// Пример файла `tailwind.config.js`
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  }
}

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

Создание Вашего файла конфигурации

Создайте файл конфигурации Tailwind для своего проекта с помощью утилиты Tailwind CLI, включенной после установки пакета npm tailwindcss:

npx tailwindcss init

Это создаст минимальный файл tailwind.config.js в корне Вашего проекта:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // или 'media' или 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Использование другого имени файла

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

npx tailwindcss init tailwindcss-config.js

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

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
  },
}

Создание файла конфигурации PostCSS

Используйте флаг -p, если вы хотите также сгенерировать базовый файл postcss.config.js вместе с файлом tailwind.config.js:

npx tailwindcss init -p

Это сгенерирует в Вашем проекте файл postcss.config.js, который выглядит следующим образом:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Строим всю конфигурацию по умолчанию

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

Если вы предпочитаете создать полный файл конфигурации, включающий всю конфигурацию Tailwind по умолчанию, используйте параметр --full:

npx tailwindcss init --full

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

Тема

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

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

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

Варианты

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

// tailwind.config.js
module.exports = {
  variants: {
    fill: [],
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
}

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

Плагины

Раздел plugins позволяет вам регистрировать плагины в Tailwind, которые можно использовать для создания дополнительных утилит, компонентов, базовых стилей или пользовательских вариантов.

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}

Узнайте больше о написании собственных плагинов в руководстве по созданию плагинов.

Пресеты

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

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

  // Индивидуальные настройки проекта
  theme: {
    //...
  },
  // ...
}

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

Префикс

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

Например, вы можете добавить префикс tw-, установив опцию prefix следующим образом:

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

Теперь каждый класс будет сгенерирован с настроенным префиксом:

.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* и так далее */

Важно понимать, что этот префикс добавляется после любых вариантных префиксов. Это означает, что классы с адаптивным префиксом или префиксом состояния, например sm: или hover:, по-прежнему будут иметь префикс ответа или состояния first , а ваш настраиваемый префикс появится после двоеточия:

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

Префиксы добавляются только к классам, созданным Tailwind; никакие префиксы не будут добавлены к Вашим собственным классам.

Это означает, что если вы добавите собственную адаптивную утилиту, например:

@variants hover {
  .bg-brand-gradient { /* ... */ }
}

…у сгенерированных отзывчивых классов не будет Вашего настроенного префикса:

.bg-brand-gradient { /* ... */ }
.hover\:bg-brand-gradient:hover { /* ... */ }

Если вы хотите добавить префикс к своим собственным утилитам, просто добавьте префикс в определение класса:

@variants hover {
  .tw-bg-brand-gradient { /* ... */ }
}

Important

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

Чтобы сгенерировать утилиты как !important, установите ключ important в параметрах конфигурации на true:

// tailwind.config.js
module.exports = {
  important: true,
}

Теперь все служебные классы Tailwind будут сгенерированы как !important:

.leading-none {
  line-height: 1 !important;
}
.leading-tight {
  line-height: 1.25 !important;
}
.leading-snug {
  line-height: 1.375 !important;
}
/* и так далее */

Обратите внимание, что любая из Ваших собственных утилит не будет автоматически помечена как !important при включении этой опции.

Если вы хотите создать свои собственные утилиты !important, просто добавьте !important в конец каждого объявления самостоятельно:

@responsive {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd) !important;
  }
}

Стратегия селектора

Установка для important значения true может вызвать некоторые проблемы при включении сторонних JS-библиотек, которые добавляют встроенные стили к Вашим элементам. В таких случаях утилиты Tailwind !important побеждают встроенные стили, которые могут нарушить ваш намеченный дизайн.

Чтобы обойти это, вы можете вместо этого установить important в селектор идентификаторов, например #app:

// tailwind.config.js
module.exports = {
  important: '#app',
}

Эта конфигурация будет префикс всех Ваших утилит с данным селектором, эффективно увеличивая их специфичность, не делая их на самом деле !important.

После того, как вы укажете селектор important, вам нужно будет убедиться, что корневой элемент Вашего сайта соответствует ему. Используя приведенный выше пример, нам нужно установить для атрибута id нашего корневого элемента значение app, чтобы стили работали правильно.

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

<html>
<!-- ... -->
<style>
  .high-specificity .nested .selector {
    color: blue;
  }
</style>
<body id="app">
  <div class="high-specificity">
    <div class="nested">
      <!-- Будет red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Будет #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>

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

Разделитель

Опция separator позволяет вам настроить, какой символ или строку следует использовать для разделения префиксов вариантов (размеры экрана, hover, focus, и т.д.) от имен утилит (text-center, items-end, и т.д.).

По умолчанию мы используем двоеточие (:), но это может быть полезно изменить, если вы используете язык шаблонов, например Pug, который не поддерживает специальные символы в имени класса.

// tailwind.config.js
module.exports = {
  separator: '_',
}

Варианты порядка

Если вы используете функцию extend для включения дополнительных вариантов, эти варианты автоматически сортируются в соответствии с разумным порядком вариантов по умолчанию.

При необходимости вы можете настроить это с помощью ключа variantOrder:

// tailwind.config.js
module.exports = {
  // ...
  variantOrder: [
    'first',
    'last',
    'odd',
    'even',
    'visited',
    'checked',
    'group-hover',
    'group-focus',
    'focus-within',
    'hover',
    'focus',
    'focus-visible',
    'active',
    'disabled',
  ]
}

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

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

Если вы не укажете конфигурацию corePlugins, все основные плагины будут включены по умолчанию:

// tailwind.config.js
module.exports = {
  // ...
}

Если вы хотите отключить определенные плагины ядра, укажите объект для corePlugins, который устанавливает для этих плагинов значение false:

// tailwind.config.js
module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

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

// tailwind.config.js
module.exports = {
  corePlugins: [
    'margin',
    'padding',
    'backgroundColor',
    // ...
  ]
}

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

// tailwind.config.js
module.exports = {
  corePlugins: []
}

Вот список всех основных плагинов для справки:

Ссылки в JavaScript

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

Чтобы упростить эту задачу, Tailwind предоставляет помощник resolveConfig, который вы можете использовать для генерации полностью объединенной версии Вашего объекта конфигурации:

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

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