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

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

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 CLI, включенной после установки пакета npm tailwindcss:

npx tailwindcss init

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

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

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

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

npx tailwindcss init tailwindcss-config.js

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

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

Если вы используете Tailwind в качестве плагина PostCSS, вам нужно будет указать собственный путь конфигурации в конфигурации 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, который выглядит следующим образом:

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

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

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

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

npx tailwindcss init --full

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


Варианты конфигурации

Содержимое

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

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

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

Тема

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

tailwind.config.js
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, которые можно использовать для создания дополнительных утилит, компонентов, базовых стилей или пользовательских вариантов.

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:, по-прежнему будут иметь модификатор ответа или состояния первого, с вашим настраиваемым префиксом, появляющимся после двоеточия:

<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:

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;
}
/* и так далее */

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

/* 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 в селектор идентификаторов, например #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 будет удален при сборке для производства.

Важный модификатор

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

<p class="font-bold !font-medium">
  Это будет средним шрифтом, несмотря на то, что полужирный шрифт появляется позже в CSS.
</p>

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

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

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

Разделитель

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

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

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

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

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

Чтобы отключить определенные основные плагины, предоставьте объект для 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: []
}

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

Плагин ЯдраОписание
accentColorУтилиты accent-color такие как accent-green-700
accessibilityУтилиты sr-only и not-sr-only
alignContentУтилиты align-content такие как content-end
alignItemsУтилиты align-items такие как items-center
alignSelfУтилиты align-self такие как self-end
animationУтилиты animation такие как animate-ping
appearanceУтилиты appearance такие как appearance-none
aspectRatioУтилиты aspect-ratio такие как aspect-square
backdropBlurУтилиты backdrop-blur такие как backdrop-blur-md
backdropBrightnessУтилиты backdrop-brightness такие как backdrop-brightness-100
backdropContrastУтилиты backdrop-contrast такие как backdrop-contrast-100
backdropFilterУтилиты backdrop-filter такие как backdrop-filter
backdropGrayscaleУтилиты backdrop-grayscale такие как backdrop-grayscale-0
backdropHueRotateУтилиты backdrop-hue-rotate такие как backdrop-hue-rotate-30
backdropInvertУтилиты backdrop-invert такие как backdrop-invert-0
backdropOpacityУтилиты backdrop-opacity такие как backdrop-opacity-50
backdropSaturateУтилиты backdrop-saturate такие как backdrop-saturate-100
backdropSepiaУтилиты backdrop-sepia такие как backdrop-sepia-0
backgroundAttachmentУтилиты background-attachment такие как bg-local
backgroundBlendModeУтилиты background-blend-mode такие как bg-blend-color-burn
backgroundClipУтилиты background-clip такие как bg-clip-padding
backgroundColorУтилиты background-color такие как bg-green-700
backgroundImageУтилиты background-image такие как bg-gradient-to-br
backgroundOpacityУтилиты opacity background-color, такие как bg-opacity-25
backgroundOriginУтилиты background-origin такие как bg-origin-padding
backgroundPositionУтилиты background-position такие как bg-left-top
backgroundRepeatУтилиты background-repeat такие как bg-repeat-x
backgroundSizeУтилиты background-size такие как bg-cover
blurУтилиты blur такие как blur-md
borderCollapseУтилиты border-collapse такие как border-collapse
borderColorУтилиты border-color такие как border-t-green-700
borderOpacityУтилиты opacity border-color, такие как border-opacity-25
borderRadiusУтилиты border-radius такие как rounded-l-lg
borderSpacingУтилиты border-spacing такие как border-spacing-x-28
borderStyleУтилиты border-style такие как border-dotted
borderWidthУтилиты border-width такие как border-t-4
boxDecorationBreakУтилиты box-decoration-break такие как decoration-clone
boxShadowУтилиты box-shadow такие как shadow-lg
boxShadowColorУтилиты box-shadow-color такие как shadow-green-700
boxSizingУтилиты box-sizing такие как box-border
breakAfterУтилиты break-after такие как break-after-avoid-page
breakBeforeУтилиты break-before такие как break-before-avoid-page
breakInsideУтилиты break-inside такие как break-inside-avoid
brightnessУтилиты brightness такие как brightness-100
caretColorУтилиты caret-color такие как caret-green-700
clearУтилиты clear такие как clear-right
columnsУтилиты columns такие как columns-auto
containerКомпонент container
contentУтилиты content такие как content-none
contrastУтилиты contrast такие как contrast-100
cursorУтилиты cursor такие как cursor-grab
displayУтилиты display такие как table-column-group
divideColorУтилиты между элементами border-color, например, divide-gray-500
divideOpacityУтилиты divide-opacity такие как divide-opacity-50
divideStyleУтилиты divide-style такие как divide-dotted
divideWidthУтилиты между элементами border-width, например, divide-x-2
dropShadowУтилиты drop-shadow такие как drop-shadow-lg
fillУтилиты fill такие как fill-green-700
filterУтилиты filter такие как filter
flexУтилиты flex такие как flex-auto
flexBasisУтилиты flex-basis такие как basis-px
flexDirectionУтилиты flex-direction такие как flex-row-reverse
flexGrowУтилиты flex-grow такие как flex-grow
flexShrinkУтилиты flex-shrink такие как flex-shrink
flexWrapУтилиты flex-wrap такие как flex-wrap-reverse
floatУтилиты float такие как float-left
fontFamilyУтилиты font-family такие как font-serif
fontSizeУтилиты font-size такие как text-3xl
fontSmoothingУтилиты font-smoothing такие как antialiased
fontStyleУтилиты font-style такие как italic
fontVariantNumericУтилиты font-variant-numeric такие как oldstyle-nums
fontWeightУтилиты font-weight такие как font-medium
gapУтилиты gap такие как gap-x-28
gradientColorStopsУтилиты gradient-color-stops такие как via-green-700
grayscaleУтилиты grayscale такие как grayscale-0
gridAutoColumnsУтилиты grid-auto-columns такие как auto-cols-min
gridAutoFlowУтилиты grid-auto-flow такие как grid-flow-dense
gridAutoRowsУтилиты grid-auto-rows такие как auto-rows-min
gridColumnУтилиты grid-column такие как col-span-6
gridColumnEndУтилиты grid-column-end такие как col-end-7
gridColumnStartУтилиты grid-column-start такие как col-start-7
gridRowУтилиты grid-row такие как row-span-3
gridRowEndУтилиты grid-row-end такие как row-end-4
gridRowStartУтилиты grid-row-start такие как row-start-4
gridTemplateColumnsУтилиты grid-template-columns такие как grid-cols-7
gridTemplateRowsУтилиты grid-template-rows такие как grid-rows-4
heightУтилиты height такие как h-72
hueRotateУтилиты hue-rotate такие как hue-rotate-30
insetУтилиты inset такие как top-44
invertУтилиты invert такие как invert-0
isolationУтилиты isolation такие как isolate
justifyContentУтилиты justify-content такие как justify-center
justifyItemsУтилиты justify-items такие как justify-items-end
justifySelfУтилиты justify-self такие как justify-self-end
letterSpacingУтилиты letter-spacing такие как tracking-normal
lineHeightУтилиты line-height такие как leading-9
listStylePositionУтилиты list-style-position такие как list-inside
listStyleTypeУтилиты list-style-type такие как list-disc
marginУтилиты margin такие как mt-28
maxHeightУтилиты max-height такие как max-h-36
maxWidthУтилиты max-width такие как max-w-6xl
minHeightУтилиты min-height такие как min-h-screen
minWidthУтилиты min-width такие как min-w-min
mixBlendModeУтилиты mix-blend-mode такие как mix-blend-hard-light
objectFitУтилиты object-fit такие как object-fill
objectPositionУтилиты object-position такие как object-left-top
opacityУтилиты opacity такие как opacity-50
orderУтилиты order такие как order-8
outlineColorУтилиты outline-color такие как outline-green-700
outlineOffsetУтилиты outline-offset такие как outline-offset-2
outlineStyleУтилиты outline-style такие как outline-dashed
outlineWidthУтилиты outline-width такие как outline-2
overflowУтилиты overflow такие как overflow-x-hidden
overscrollBehaviorУтилиты overscroll-behavior такие как overscroll-y-contain
paddingУтилиты padding такие как pt-28
placeContentУтилиты place-content такие как place-content-between
placeItemsУтилиты place-items такие как place-items-end
placeSelfУтилиты place-self такие как place-self-end
placeholderColorУтилиты placeholder color, такие как placeholder-red-600
placeholderOpacityУтилиты placeholder color, такие как placeholder-opacity-25
pointerEventsУтилиты pointer-events такие как pointer-events-none
positionУтилиты position такие как absolute
preflightTailwind стили base/reset
resizeУтилиты resize такие как resize-y
ringColorУтилиты ring-color такие как ring-green-700
ringOffsetColorУтилиты ring-offset-color такие как ring-offset-green-700
ringOffsetWidthУтилиты ring-offset-width такие как ring-offset-2
ringOpacityУтилиты ring-opacity такие как ring-opacity-50
ringWidthУтилиты ring-width такие как ring-4
rotateУтилиты rotate такие как rotate-6
saturateУтилиты saturate такие как saturate-100
scaleУтилиты scale такие как scale-x-95
scrollBehaviorУтилиты scroll-behavior такие как scroll-auto
scrollMarginУтилиты scroll-margin такие как scroll-mt-28
scrollPaddingУтилиты scroll-padding такие как scroll-pt-28
scrollSnapAlignУтилиты scroll-snap-align такие как snap-end
scrollSnapStopУтилиты scroll-snap-stop такие как snap-normal
scrollSnapTypeУтилиты scroll-snap-type такие как snap-y
sepiaУтилиты sepia такие как sepia-0
skewУтилиты skew такие как skew-x-12
spaceУтилиты "space-between", например, space-x-4
strokeУтилиты stroke такие как stroke-green-700
strokeWidthУтилиты stroke-width такие как stroke-1
tableLayoutУтилиты table-layout такие как table-auto
textAlignУтилиты text-align такие как text-right
textColorУтилиты text-color такие как text-green-700
textDecorationУтилиты text-decoration такие как overline
textDecorationColorУтилиты text-decoration-color такие как decoration-green-700
textDecorationStyleУтилиты text-decoration-style такие как decoration-dotted
textDecorationThicknessУтилиты text-decoration-thickness такие как decoration-4
textIndentУтилиты text-indent такие как indent-28
textOpacityУтилиты text-opacity такие как text-opacity-50
textOverflowУтилиты text-overflow такие как overflow-ellipsis
textTransformУтилиты text-transform такие как lowercase
textUnderlineOffsetУтилиты text-underline-offset такие как underline-offset-2
touchActionУтилиты touch-action такие как touch-pan-right
transformУтилиты transform (для включения функций преобразования)
transformOriginУтилиты transform-origin такие как origin-bottom-right
transitionDelayУтилиты transition-delay такие как delay-200
transitionDurationУтилиты transition-duration такие как duration-200
transitionPropertyУтилиты transition-property такие как transition-colors
transitionTimingFunctionУтилиты transition-timing-function такие как ease-in
translateУтилиты translate такие как translate-x-full
userSelectУтилиты user-select такие как select-text
verticalAlignУтилиты vertical-align такие как align-bottom
visibilityУтилиты visibility такие как visible
whitespaceУтилиты whitespace такие как whitespace-pre
widthУтилиты width такие как w-1.5
willChangeУтилиты will-change такие как will-change-scroll
wordBreakУтилиты word-break такие как break-words
zIndexУтилиты z-index такие как z-30

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