Настройка

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

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

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    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: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

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

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

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

npx tailwindcss init

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

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

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

npx tailwindcss init tailwindcss-config.js

При использовании пользовательского имени файла вам необходимо указать его как аргумент командной строки при компиляции CSS с помощью инструмента командной строки Tailwind:

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

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

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

В качестве альтернативы вы можете указать путь к своему пользовательскому файлу конфигурации с помощью директивы @config:

@config "./tailwindcss-config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

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

Генерация файла конфигурации 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 внутри.

Параметры конфигурации

Контент

Раздел content содержит пути ко всем вашим HTML-шаблонам, JS-компонентам и другим файлам, содержащим классы Tailwind.

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}

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

Тема

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

module.exports = {
  // ...
  theme: {
    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: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

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

Плагины

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

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

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

Пресеты

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

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

  // Project-specific customizations
  theme: {
    //...
  },
}

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

Префикс

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

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

module.exports = {
  prefix: 'tw-',
}

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

.tw-text-left {
  text-align: left;
}
.tw-text-center {
  text-align: center;
}
.tw-text-right {
  text-align: right;
}
/* etc. */

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

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

Модификатор дефиса для отрицательных значений должен добавляться перед вашим префиксом, поэтому -mt-8 станет -tw-mt-8, если вы настроили tw- в качестве префикса:

<div class="-tw-mt-8">
  <!-- -->
</div>

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

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

@layer utilities {
  .bg-brand-gradient { /* ... */ }
}

…сгенерированные варианты не будут иметь вашего настроенного префикса:

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

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

@layer utilities {
  .tw-bg-brand-gradient { /* ... */ }
}

Важно

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

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

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;
}
/* etc. */

Это также относится к любым пользовательским утилитам, которые вы определяете в своем CSS с помощью директивы @layer utilities:

/* Input */
@layer utilities {
  .bg-brand-gradient {
    background-image: linear-gradient(#3490dc, #6574cd);
  }
}

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

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

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

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

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">
      <!-- Will be red-500 -->
      <div class="selector text-red-500"><!-- ... --></div>
    </div>
  </div>

  <!-- Will be #bada55 -->
  <div class="text-red-500" style="color: #bada55;"><!-- ... --></div>
</body>
</html>

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

Модификатор важности

В качестве альтернативы вы можете сделать любую утилиту важной, добавив символ ! в начало:

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>

Символ ! всегда идет в начале имени утилиты, после любых вариантов, но перед любым префиксом:

<div class="sm:hover:!tw-font-bold">

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

Разделитель

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

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

module.exports = {
  separator: '_',
}

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

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

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

module.exports = {
  corePlugins: {
    float: false,
    objectFit: false,
    objectPosition: false,
  }
}

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

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

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

module.exports = {
  corePlugins: []
}

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

Использование нескольких конфигураций

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

Узнайте больше о директиве @config в документации Функции и директивы.

Ссылка в 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, для генерации статической версии вашей конфигурации во время сборки.

Типы TypeScript

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

Файлы конфигурации, сгенерированные с помощью Tailwind CLI, по умолчанию включают необходимые аннотации типов, но для ручного настройки типов TypeScript просто добавьте аннотацию типа над вашим объектом конфигурации:

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