Настройка цветов

​Цветовая палитра по умолчанию

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

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // Настройте свою цветовую палитру здесь
    }
  }
}

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

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

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

/** @type {import('tailwindcss').Config} */
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, если вы хотите использовать их в своем проекте.

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

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

/** @type {import('tailwindcss').Config} */
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, если вы хотите определить значение без суффикса:

/** @type {import('tailwindcss').Config} */
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>
  Поделиться в Твиттере
</button>

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

​Создание цветов

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

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

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

​Использование цветов по умолчанию

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

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.

​Наложение названий цветов

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

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.

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

/** @type {import('tailwindcss').Config} */
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 для добавления дополнительных оттенков к существующему цвету, если это необходимо для вашего дизайна:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          950: '#17275c',
        },
      }
    },
  },
}

​Отключение цвета по умолчанию

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

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

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

const colors = require('tailwindcss/colors')

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

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

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

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

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

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

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

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

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // Using modern `rgb`
      primary: 'rgb(var(--color-primary))',
      secondary: 'rgb(var(--color-secondary))',

      // Using modern `hsl`
      primary: 'hsl(var(--color-primary))',
      secondary: 'hsl(var(--color-secondary))',

      // Using legacy `rgba`
      primary: 'rgba(var(--color-primary), 1)',
      secondary: 'rgba(var(--color-secondary), 1)',
    }
  }
}

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

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

@layer base {
  :root {
    /* For rgb(255 115 179 / 1) */
    --color-primary: 255 115 179;

    /* For hsl(333deg 100% 73% / 1) */
    --color-primary: 333deg 100% 73%;

    /* For rgba(255, 115, 179, 1) */
    --color-primary: 255, 115, 179;
  }
}