Tailwind CSS - 強調色

上一頁
下一頁

Tailwind CSS **強調色**是一組預定義的類，用於將各種顏色應用於網頁上的元素。這些顏色有助於突出設計的重要部分，例如按鈕、連結和邊框。

Tailwind CSS 強調色類

以下是 Tailwind CSS 強調色類和屬性列表，方便您將顏色應用於元素。

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

Tailwind CSS 強調色類功能

  • accent-inherit: 使用父元素的強調色。
  • accent-current: 將元素的當前顏色應用為強調色。
  • accent-transparent: 使強調色完全透明。
  • accent-black: 將強調色設定為黑色。
  • accent-white: 將強調色設定為白色。
  • accent-slate-*: 應用各種深灰色的色調作為強調色。
  • accent-gray-*: 應用各種灰色的色調作為強調色。
  • accent-zinc-*: 應用各種鋅灰色的色調作為強調色。
  • accent-neutral-*: 應用各種中性色調作為強調色。
  • accent-stone-*: 應用各種石灰色的色調作為強調色。
  • accent-red-*: 應用各種深淺的紅色作為高亮顏色。
  • accent-orange-*: 應用各種深淺的橙色作為高亮顏色。
  • accent-amber-*: 應用各種深淺的琥珀色作為高亮顏色。
  • accent-yellow-*: 應用各種深淺的黃色作為高亮顏色。
  • accent-lime-*: 應用各種深淺的青檸色作為高亮顏色。
  • accent-green-*: 應用各種深淺的綠色作為高亮顏色。
  • accent-emerald-*: 應用各種深淺的祖母綠作為高亮顏色。
  • accent-teal-*: 應用各種深淺的藍綠色作為高亮顏色。
  • accent-cyan-*: 應用各種深淺的青色作為高亮顏色。
  • accent-sky-*: 應用各種深淺的天藍色作為高亮顏色。
  • accent-blue-*: 應用各種深淺的藍色作為高亮顏色。
  • accent-indigo-*: 應用各種深淺的靛藍色作為高亮顏色。
  • accent-violet-*: 應用各種深淺的紫羅蘭色作為高亮顏色。
  • accent-purple-*: 應用各種深淺的紫色作為高亮顏色。
  • accent-fuchsia-*: 應用各種深淺的紫紅色作為高亮顏色。
  • accent-pink-*: 應用各種深淺的粉色作為高亮顏色。
  • accent-rose-*: 應用各種深淺的玫瑰色作為高亮顏色。

注意：在 'accent-color-*' 中，'*' 可以替換為 **50** 到 **950** 之間的數值，其中 **50** 是最淺的色調，**950** 是最深的色調。

Tailwind CSS 強調色類示例

以下是 Tailwind CSS 強調色類的示例，展示如何將不同的顏色應用於文字強調。每個示例都使用特定的類來建立各種視覺效果。

應用強調色類

Tailwind CSS 的 accent-color-* 類允許您輕鬆地將不同顏色和色調應用於元素的高亮部分。每個類都組合了一個顏色名稱（例如，“red”、“blue”等）和一個數字值（例如，“300”、“400”、“500”）來指示從淺到深的色調強度。

此示例顯示了 Tailwind CSS 強調色類如何透過應用不同的色調來更改單選按鈕強調的顏色。

示例

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Accent Color
    </h2>
    <label class="block mb-2">Default Radio Button</label>
    <label class="mb-4 space-x-2 flex">
        <input type="radio" name="option">
        <span>Default</span>
    </label>
    <label class="block mb-2">Accent Radio Buttons</label>
    <label class="flex space-x-2 mb-4">
        <input type="radio" name="option" 
              class="accent-blue-500" checked>
        <span>Blue Accent</span>
    </label>
    <label class="flex items-center space-x-2">
        <input type="radio" name="option" 
              class="accent-green-500">
        <span>Green Accent</span>
    </label>
</body>

</html>

範圍輸入的強調顏色

此示例顯示瞭如何使用 Tailwind CSS 強調色類來設定範圍輸入的樣式，並使用獨特的藍綠色對其進行高亮顯示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Accent Color
    </h2>
    <label class="block mb-2 mt-6">
        Default Range Input
    </label>
    <input type="range" class="w-full">
 
    <label class="block mb-2 mt-6">
        Accent Range Input
    </label>
    <input type="range" class="accent-teal-600 w-full">
</body>

</html>

使用不同不透明度的強調顏色

此示例演示瞭如何使用 Tailwind CSS 強調色類將不同深淺的靛藍色和不同不透明度應用於範圍輸入。嘗試使用 accent-color-* 類來檢視其他顏色選項。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Accent Color
    </h2>
    <h3 class="font-bold mb-4 underline">
        Range Input with Different Indigo Shades
    </h3>
    <label class="block mb-4">
        <input type="range" class="accent-indigo-900 w-full">
        Dark Indigo Range Input
    </label>
    
    <label class="block mb-4">
        <input type="range" class="accent-indigo-700 w-full">
        Medium Dark Indigo Range Input
    </label>
    
    <label class="block mb-4">
        <input type="range" class="accent-indigo-500 w-full">
        Medium Indigo Range Input
    </label>
    
    <label class="block mb-4">
        <input type="range" class="accent-indigo-400 w-full"> 
        Light Indigo Range Input
    </label>
    <label>
        <input type="range" class="accent-indigo-300 w-full">
        Very Light Indigo Range Input
    </label>
</body>

</html>
列印頁面
上一頁
下一頁
廣告