Краткая справка

Класс
Свойства
caret-inheritcaret-color: inherit;
caret-currentcaret-color: currentColor;
caret-transparentcaret-color: transparent;
caret-blackcaret-color: #000;
caret-whitecaret-color: #fff;
caret-slate-50caret-color: #f8fafc;
caret-slate-100caret-color: #f1f5f9;
caret-slate-200caret-color: #e2e8f0;
caret-slate-300caret-color: #cbd5e1;
caret-slate-400caret-color: #94a3b8;
caret-slate-500caret-color: #64748b;
caret-slate-600caret-color: #475569;
caret-slate-700caret-color: #334155;
caret-slate-800caret-color: #1e293b;
caret-slate-900caret-color: #0f172a;
caret-slate-950caret-color: #020617;
caret-gray-50caret-color: #f9fafb;
caret-gray-100caret-color: #f3f4f6;
caret-gray-200caret-color: #e5e7eb;
caret-gray-300caret-color: #d1d5db;
caret-gray-400caret-color: #9ca3af;
caret-gray-500caret-color: #6b7280;
caret-gray-600caret-color: #4b5563;
caret-gray-700caret-color: #374151;
caret-gray-800caret-color: #1f2937;
caret-gray-900caret-color: #111827;
caret-gray-950caret-color: #030712;
caret-zinc-50caret-color: #fafafa;
caret-zinc-100caret-color: #f4f4f5;
caret-zinc-200caret-color: #e4e4e7;
caret-zinc-300caret-color: #d4d4d8;
caret-zinc-400caret-color: #a1a1aa;
caret-zinc-500caret-color: #71717a;
caret-zinc-600caret-color: #52525b;
caret-zinc-700caret-color: #3f3f46;
caret-zinc-800caret-color: #27272a;
caret-zinc-900caret-color: #18181b;
caret-zinc-950caret-color: #09090b;
caret-neutral-50caret-color: #fafafa;
caret-neutral-100caret-color: #f5f5f5;
caret-neutral-200caret-color: #e5e5e5;
caret-neutral-300caret-color: #d4d4d4;
caret-neutral-400caret-color: #a3a3a3;
caret-neutral-500caret-color: #737373;
caret-neutral-600caret-color: #525252;
caret-neutral-700caret-color: #404040;
caret-neutral-800caret-color: #262626;
caret-neutral-900caret-color: #171717;
caret-neutral-950caret-color: #0a0a0a;
caret-stone-50caret-color: #fafaf9;
caret-stone-100caret-color: #f5f5f4;
caret-stone-200caret-color: #e7e5e4;
caret-stone-300caret-color: #d6d3d1;
caret-stone-400caret-color: #a8a29e;
caret-stone-500caret-color: #78716c;
caret-stone-600caret-color: #57534e;
caret-stone-700caret-color: #44403c;
caret-stone-800caret-color: #292524;
caret-stone-900caret-color: #1c1917;
caret-stone-950caret-color: #0c0a09;
caret-red-50caret-color: #fef2f2;
caret-red-100caret-color: #fee2e2;
caret-red-200caret-color: #fecaca;
caret-red-300caret-color: #fca5a5;
caret-red-400caret-color: #f87171;
caret-red-500caret-color: #ef4444;
caret-red-600caret-color: #dc2626;
caret-red-700caret-color: #b91c1c;
caret-red-800caret-color: #991b1b;
caret-red-900caret-color: #7f1d1d;
caret-red-950caret-color: #450a0a;
caret-orange-50caret-color: #fff7ed;
caret-orange-100caret-color: #ffedd5;
caret-orange-200caret-color: #fed7aa;
caret-orange-300caret-color: #fdba74;
caret-orange-400caret-color: #fb923c;
caret-orange-500caret-color: #f97316;
caret-orange-600caret-color: #ea580c;
caret-orange-700caret-color: #c2410c;
caret-orange-800caret-color: #9a3412;
caret-orange-900caret-color: #7c2d12;
caret-orange-950caret-color: #431407;
caret-amber-50caret-color: #fffbeb;
caret-amber-100caret-color: #fef3c7;
caret-amber-200caret-color: #fde68a;
caret-amber-300caret-color: #fcd34d;
caret-amber-400caret-color: #fbbf24;
caret-amber-500caret-color: #f59e0b;
caret-amber-600caret-color: #d97706;
caret-amber-700caret-color: #b45309;
caret-amber-800caret-color: #92400e;
caret-amber-900caret-color: #78350f;
caret-amber-950caret-color: #451a03;
caret-yellow-50caret-color: #fefce8;
caret-yellow-100caret-color: #fef9c3;
caret-yellow-200caret-color: #fef08a;
caret-yellow-300caret-color: #fde047;
caret-yellow-400caret-color: #facc15;
caret-yellow-500caret-color: #eab308;
caret-yellow-600caret-color: #ca8a04;
caret-yellow-700caret-color: #a16207;
caret-yellow-800caret-color: #854d0e;
caret-yellow-900caret-color: #713f12;
caret-yellow-950caret-color: #422006;
caret-lime-50caret-color: #f7fee7;
caret-lime-100caret-color: #ecfccb;
caret-lime-200caret-color: #d9f99d;
caret-lime-300caret-color: #bef264;
caret-lime-400caret-color: #a3e635;
caret-lime-500caret-color: #84cc16;
caret-lime-600caret-color: #65a30d;
caret-lime-700caret-color: #4d7c0f;
caret-lime-800caret-color: #3f6212;
caret-lime-900caret-color: #365314;
caret-lime-950caret-color: #1a2e05;
caret-green-50caret-color: #f0fdf4;
caret-green-100caret-color: #dcfce7;
caret-green-200caret-color: #bbf7d0;
caret-green-300caret-color: #86efac;
caret-green-400caret-color: #4ade80;
caret-green-500caret-color: #22c55e;
caret-green-600caret-color: #16a34a;
caret-green-700caret-color: #15803d;
caret-green-800caret-color: #166534;
caret-green-900caret-color: #14532d;
caret-green-950caret-color: #052e16;
caret-emerald-50caret-color: #ecfdf5;
caret-emerald-100caret-color: #d1fae5;
caret-emerald-200caret-color: #a7f3d0;
caret-emerald-300caret-color: #6ee7b7;
caret-emerald-400caret-color: #34d399;
caret-emerald-500caret-color: #10b981;
caret-emerald-600caret-color: #059669;
caret-emerald-700caret-color: #047857;
caret-emerald-800caret-color: #065f46;
caret-emerald-900caret-color: #064e3b;
caret-emerald-950caret-color: #022c22;
caret-teal-50caret-color: #f0fdfa;
caret-teal-100caret-color: #ccfbf1;
caret-teal-200caret-color: #99f6e4;
caret-teal-300caret-color: #5eead4;
caret-teal-400caret-color: #2dd4bf;
caret-teal-500caret-color: #14b8a6;
caret-teal-600caret-color: #0d9488;
caret-teal-700caret-color: #0f766e;
caret-teal-800caret-color: #115e59;
caret-teal-900caret-color: #134e4a;
caret-teal-950caret-color: #042f2e;
caret-cyan-50caret-color: #ecfeff;
caret-cyan-100caret-color: #cffafe;
caret-cyan-200caret-color: #a5f3fc;
caret-cyan-300caret-color: #67e8f9;
caret-cyan-400caret-color: #22d3ee;
caret-cyan-500caret-color: #06b6d4;
caret-cyan-600caret-color: #0891b2;
caret-cyan-700caret-color: #0e7490;
caret-cyan-800caret-color: #155e75;
caret-cyan-900caret-color: #164e63;
caret-cyan-950caret-color: #083344;
caret-sky-50caret-color: #f0f9ff;
caret-sky-100caret-color: #e0f2fe;
caret-sky-200caret-color: #bae6fd;
caret-sky-300caret-color: #7dd3fc;
caret-sky-400caret-color: #38bdf8;
caret-sky-500caret-color: #0ea5e9;
caret-sky-600caret-color: #0284c7;
caret-sky-700caret-color: #0369a1;
caret-sky-800caret-color: #075985;
caret-sky-900caret-color: #0c4a6e;
caret-sky-950caret-color: #082f49;
caret-blue-50caret-color: #eff6ff;
caret-blue-100caret-color: #dbeafe;
caret-blue-200caret-color: #bfdbfe;
caret-blue-300caret-color: #93c5fd;
caret-blue-400caret-color: #60a5fa;
caret-blue-500caret-color: #3b82f6;
caret-blue-600caret-color: #2563eb;
caret-blue-700caret-color: #1d4ed8;
caret-blue-800caret-color: #1e40af;
caret-blue-900caret-color: #1e3a8a;
caret-blue-950caret-color: #172554;
caret-indigo-50caret-color: #eef2ff;
caret-indigo-100caret-color: #e0e7ff;
caret-indigo-200caret-color: #c7d2fe;
caret-indigo-300caret-color: #a5b4fc;
caret-indigo-400caret-color: #818cf8;
caret-indigo-500caret-color: #6366f1;
caret-indigo-600caret-color: #4f46e5;
caret-indigo-700caret-color: #4338ca;
caret-indigo-800caret-color: #3730a3;
caret-indigo-900caret-color: #312e81;
caret-indigo-950caret-color: #1e1b4b;
caret-violet-50caret-color: #f5f3ff;
caret-violet-100caret-color: #ede9fe;
caret-violet-200caret-color: #ddd6fe;
caret-violet-300caret-color: #c4b5fd;
caret-violet-400caret-color: #a78bfa;
caret-violet-500caret-color: #8b5cf6;
caret-violet-600caret-color: #7c3aed;
caret-violet-700caret-color: #6d28d9;
caret-violet-800caret-color: #5b21b6;
caret-violet-900caret-color: #4c1d95;
caret-violet-950caret-color: #2e1065;
caret-purple-50caret-color: #faf5ff;
caret-purple-100caret-color: #f3e8ff;
caret-purple-200caret-color: #e9d5ff;
caret-purple-300caret-color: #d8b4fe;
caret-purple-400caret-color: #c084fc;
caret-purple-500caret-color: #a855f7;
caret-purple-600caret-color: #9333ea;
caret-purple-700caret-color: #7e22ce;
caret-purple-800caret-color: #6b21a8;
caret-purple-900caret-color: #581c87;
caret-purple-950caret-color: #3b0764;
caret-fuchsia-50caret-color: #fdf4ff;
caret-fuchsia-100caret-color: #fae8ff;
caret-fuchsia-200caret-color: #f5d0fe;
caret-fuchsia-300caret-color: #f0abfc;
caret-fuchsia-400caret-color: #e879f9;
caret-fuchsia-500caret-color: #d946ef;
caret-fuchsia-600caret-color: #c026d3;
caret-fuchsia-700caret-color: #a21caf;
caret-fuchsia-800caret-color: #86198f;
caret-fuchsia-900caret-color: #701a75;
caret-fuchsia-950caret-color: #4a044e;
caret-pink-50caret-color: #fdf2f8;
caret-pink-100caret-color: #fce7f3;
caret-pink-200caret-color: #fbcfe8;
caret-pink-300caret-color: #f9a8d4;
caret-pink-400caret-color: #f472b6;
caret-pink-500caret-color: #ec4899;
caret-pink-600caret-color: #db2777;
caret-pink-700caret-color: #be185d;
caret-pink-800caret-color: #9d174d;
caret-pink-900caret-color: #831843;
caret-pink-950caret-color: #500724;
caret-rose-50caret-color: #fff1f2;
caret-rose-100caret-color: #ffe4e6;
caret-rose-200caret-color: #fecdd3;
caret-rose-300caret-color: #fda4af;
caret-rose-400caret-color: #fb7185;
caret-rose-500caret-color: #f43f5e;
caret-rose-600caret-color: #e11d48;
caret-rose-700caret-color: #be123c;
caret-rose-800caret-color: #9f1239;
caret-rose-900caret-color: #881337;
caret-rose-950caret-color: #4c0519;

Основы использования

Установка цвета каретки

Используйте утилиту caret-*, чтобы изменить цвет курсора ввода текста.

Сфокусируйте текстовое поле, чтобы увидеть новый цвет каретки

<textarea class="caret-pink-500 ..."></textarea>

Применяя условно

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте focus:caret-indigo-500, чтобы применять утилиту caret-indigo-500 только при focus.

<textarea class="caret-blue-500 focus:caret-indigo-500"></textarea>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:caret-indigo-500, чтобы применить утилиту caret-indigo-500 только на экранах среднего размера и выше.

<textarea class="caret-blue-500 md:caret-indigo-500"></textarea>

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


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

Настройка вашей темы

По умолчанию Tailwind делает всю цветовую палитру по умолчанию доступной в виде цветов caret. Вы можете настроить свою цветовую палитру, отредактировав theme.colors или theme.extend.colors в файле tailwind.config.js.

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

Кроме того, вы можете настроить только цвета caret, отредактировав theme.caretColor или theme.extend.caretColor в своем файле tailwind.config.js.

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

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

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

<textarea class="caret-[#50d71e]"></textarea>

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