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

Обзор

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

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

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Настройте свою цветовую палитру здесь
    }
  }
}

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

Изменение цветов

Если у вас нет набора полностью настраиваемых цветов для Вашего проекта, вы можете выбрать свои цвета из нашей полной цветовой палитры, импортировав '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.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    }
  }
}

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

Несмотря на то, что у каждого цвета есть определенное имя, вам рекомендуется использовать в своих проектах псевдонимы, как вам нравится. Мы даже делаем это в конфигурации по умолчанию, заменяя coolGray на gray, violet на purple, amber на yellow и emerald на green.

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

Пользовательские цвета

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

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    }
  }
}

По умолчанию эти цвета автоматически используются всеми цветовыми утилитами, такими как textColor, backgroundColor, borderColor и другими.

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

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

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        light: '#b3bcf5',
        DEFAULT: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

Различные сегменты имени цвета объединяются в имена классов, такие как bg-indigo-light.

Как и во многих других местах в Tailwind, ключ DEFAULT является специальной и означает «без модификатора», поэтому эта конфигурация будет генерировать такие классы, как text-indigo и bg-indigo, а не text-indigo-DEFAULT или bg-indigo-DEFAULT.

Вы также можете определить свои цвета как простые строки вместо объектов:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      'indigo-lighter': '#b3bcf5',
      'indigo': '#5c6ac4',
      'indigo-dark': '#202e78',
    }
  }
}

Обратите внимание, что при доступе к цветам с помощью функции theme() вам необходимо использовать ту же нотацию, которую вы использовали для их определения.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        // theme('colors.indigo.light')
        light: '#b3bcf5',

        // theme('colors.indigo.DEFAULT')
        DEFAULT: '#5c6ac4',
      },

      // theme('colors.indigo-dark')
      'indigo-dark': '#202e78',
    }
  }
}

Расширение значений по умолчанию

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      }
    }
  }
}

Это создаст классы вроде bg-regal-blue в дополнение ко всем цветам Tailwind по умолчанию.

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          450: '#5F99F7'
        },
      }
    }
  }
}

Это добавит такие классы, как bg-blue-450, без потери существующих классов, таких как bg-blue-400 или bg-blue-500.

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

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

Например, этот файл tailwind.config.js исключает бирюзовый, оранжевый и розовый, но включает остальные цвета по умолчанию:

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.blue
    }
  }
}

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

Именование Ваших цветов

По умолчанию Tailwind использует буквальные названия цветов (например, красный, зеленый и т. д.) и числовую шкалу (где 50 - светлый, а 900 - темный). Это оказывается довольно практичным для большинства проектов, но есть веские причины использовать и другие соглашения об именах.

Например, если вы работаете над проектом, который должен поддерживать несколько тем, возможно, имеет смысл использовать более абстрактные имена, такие как primary и secondary:

// 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, чтобы упростить переключение тем на клиенте:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      // ...
    }
  }
}

/* In your CSS */
:root {
  --color-primary: #5c6ac4;
  --color-secondary: #ecc94b;
  /* ... */
}

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

Обратите внимание, что цвета, определенные с помощью настраиваемых свойств, не будут работать с такими утилитами непрозрачности цвета, как bg-opacity-50, без дополнительной настройки. Смотрите этот пример репозитория для получения дополнительной информации о том, как это сделать.

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

Часто задают вопрос: «Как мне создать 50–900 оттенков моих собственных цветов?».

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

Справка по цветовой палитре

Это список всех цветов, доступных при импорте tailwindcss/colors в ваш файл tailwind.config.js.

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      // Build your palette here
      transparent: 'transparent',
      current: 'currentColor',
      gray: colors.trueGray,
      red: colors.red,
      blue: colors.sky,
      yellow: colors.amber,
    }
  }
}

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