Colors — Tailwind CSS

Палитра цветов по умолчанию

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

Slate

Gray

Zinc

Neutral

Камень

Красный

Оранжевый

Янтарь

Жёлтый

Лайм

Зелёный

Изумрудный

Бирюзовый

Цвета циан

Небесный

Синий

Индиго

Фиолетовый

Пурпурный

Фуксия

Розовый

Но когда вам нужно настроить свою палитру, вы можете настроить свои цвета в разделе colors в вашем файле theme.

tailwind.config.js

module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

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

Использование пользовательских цветов

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

tailwind.config.js

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

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

<div class="bg-midnight text-tahiti">
  <!-- ... -->
</div>

Не забудьте включить значения, такие как transparent и currentColor, если вы хотите использовать их в своём проекте.

Синтаксис объекта цвета

Когда ваша палитра включает несколько оттенков одного цвета, удобно сгруппировать их с помощью нашего вложенного синтаксиса объекта цвета:

tailwind.config.js

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      },
      // ...
    },
  },
}

Вложенные ключи будут объединены с родительским ключом для формирования имён классов, таких как bg-tahiti-400.

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

tailwind.config.js

module.exports = {
  theme: {
    colors: {
      // ...
      'tahiti': {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // ...
    },
  },
}

Это создаст классы, такие как bg-tahiti, bg-tahiti-light, и bg-tahiti-dark.

Произвольные значения

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

<button class="bg-[#1da1f2] text-white ...">
  <svg><!-- ... --></svg>
  Share on Twitter
</button>

Дополнительную информацию вы найдёте в документации использование произвольных значений.

Генерация цветов

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

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

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

Использование стандартных цветов

Если для вашего проекта нет полностью настраиваемых цветов, вы можете выбрать цвета из нашей стандартной палитры, импортировав tailwindcss/colors в свой файл конфигурации и выбрав нужные цвета:

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}

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

Псевдонимы имён цветов

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

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.slate,
      green: colors.emerald,
      purple: colors.violet,
      yellow: colors.amber,
      pink: colors.fuchsia,
    },
  },
}

Это особенно характерно для серых цветов, так как обычно вы используете только один набор в любом конкретном проекте, и приятно иметь возможность ввести bg-gray-300 вместо bg-neutral-300, например.

Добавление дополнительных цветов

Если вы хотите добавить совершенно новый цвет в стандартную палитру, добавьте его в раздел theme.extend.colors вашего файла конфигурации:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
  },
}

Вы также можете использовать theme.extend.colors для добавления дополнительных оттенков к существующему цвету, если это необходимо для вашего дизайна:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          950: '#17275c',
        },
      }
    },
  },
}

Отключение стандартного цвета

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

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}

Названия ваших цветов

Tailwind по умолчанию использует буквальные имена цветов (например, красный, зелёный и т. д.) и числовую шкалу (где 50 — светлый, а 900 — тёмный). Мы считаем, что это лучший выбор для большинства проектов, и обнаружили, что он проще поддерживать, чем использование абстрактных имён, таких как primary или danger.

Тем не менее, вы можете назвать свои цвета в Tailwind как угодно, и если вы работаете над проектом, который должен поддерживать несколько тем, например, использование более абстрактных имён может быть полезным:

tailwind.config.js

module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

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

tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

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

Использование переменных CSS

Если вы хотите определить свои цвета как переменные CSS, вам нужно определить эти переменные как просто каналы цвета, если вы хотите, чтобы они работали с синтаксисом модификатора непрозрачности синтаксиса модификатора непрозрачности:

Определите свои переменные CSS как каналы без функции цветового пространства

main.css

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

@layer base {
  :root {
    --color-primary: 255 115 179;
    --color-secondary: 111 114 185;
    /* ... */
  }
}

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

main.css

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

@layer base {
  :root {
    --color-primary: rgb(255 115 179);
    --color-secondary: rgb(111 114 185);
    /* ... */
  }
}

Затем определите свои цвета в файле конфигурации, обязательно указав используемое цветовое пространство и специальный <alpha-value> плейсхолдер, который Tailwind будет использовать для вставки значения альфа-канала при использовании модификатора непрозрачности:

tailwind.config.js

module.exports = {
  theme: {
    colors: {
      // Using modern `rgb`
      primary: 'rgb(var(--color-primary) / <alpha-value>)',
      secondary: 'rgb(var(--color-secondary) / <alpha-value>)',

      // Using modern `hsl`
      primary: 'hsl(var(--color-primary) / <alpha-value>)',
      secondary: 'hsl(var(--color-secondary) / <alpha-value>)',

      // Using legacy `rgba`
      primary: 'rgba(var(--color-primary), <alpha-value>)',
      secondary: 'rgba(var(--color-secondary), <alpha-value>)',
    }
  }
}

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

main.css

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

@layer base {
  :root {
    /* For rgb(255 115 179 / <alpha-value>) */
    --color-primary: 255 115 179;

    /* For hsl(198deg 93% 60% / <alpha-value>) */
    --color-primary: 198deg 93% 60%;

    /* For rgba(255, 115, 179, <alpha-value>) */
    --color-primary: 255, 115, 179;
  }
}