Tailwind CSS 渐变色停止

2022-08-08 10:00 更新

渐变色停止

用于控制背景渐变中的颜色停止的功能类。

Class Properties
from-transparent --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
from-current --tw-gradient-from: currentColor; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
from-black --tw-gradient-from: #000; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
from-white --tw-gradient-from: #fff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
from-gray-50 --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0));
from-gray-100 --tw-gradient-from: #f3f4f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(243, 244, 246, 0));
from-gray-200 --tw-gradient-from: #e5e7eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(229, 231, 235, 0));
from-gray-300 --tw-gradient-from: #d1d5db; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(209, 213, 219, 0));
from-gray-400 --tw-gradient-from: #9ca3af; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(156, 163, 175, 0));
from-gray-500 --tw-gradient-from: #6b7280; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(107, 114, 128, 0));
from-gray-600 --tw-gradient-from: #4b5563; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(75, 85, 99, 0));
from-gray-700 --tw-gradient-from: #374151; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(55, 65, 81, 0));
from-gray-800 --tw-gradient-from: #1f2937; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 41, 55, 0));
from-gray-900 --tw-gradient-from: #111827; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(17, 24, 39, 0));
from-red-50 --tw-gradient-from: #fef2f2; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254, 242, 242, 0));
from-red-100 --tw-gradient-from: #fee2e2; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254, 226, 226, 0));
from-red-200 --tw-gradient-from: #fecaca; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254, 202, 202, 0));
from-red-300 --tw-gradient-from: #fca5a5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0));
from-red-400 --tw-gradient-from: #f87171; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(248, 113, 113, 0));
from-red-500 --tw-gradient-from: #ef4444; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0));
from-red-600 --tw-gradient-from: #dc2626; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(220, 38, 38, 0));
from-red-700 --tw-gradient-from: #b91c1c; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(185, 28, 28, 0));
from-red-800 --tw-gradient-from: #991b1b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(153, 27, 27, 0));
from-red-900 --tw-gradient-from: #7f1d1d; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(127, 29, 29, 0));
from-yellow-50 --tw-gradient-from: #fffbeb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 251, 235, 0));
from-yellow-100 --tw-gradient-from: #fef3c7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254, 243, 199, 0));
from-yellow-200 --tw-gradient-from: #fde68a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 230, 138, 0));
from-yellow-300 --tw-gradient-from: #fcd34d; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 211, 77, 0));
from-yellow-400 --tw-gradient-from: #fbbf24; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 191, 36, 0));
from-yellow-500 --tw-gradient-from: #f59e0b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0));
from-yellow-600 --tw-gradient-from: #d97706; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
from-yellow-700 --tw-gradient-from: #b45309; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(180, 83, 9, 0));
from-yellow-800 --tw-gradient-from: #92400e; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(146, 64, 14, 0));
from-yellow-900 --tw-gradient-from: #78350f; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(120, 53, 15, 0));
from-green-50 --tw-gradient-from: #ecfdf5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 253, 245, 0));
from-green-100 --tw-gradient-from: #d1fae5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(209, 250, 229, 0));
from-green-200 --tw-gradient-from: #a7f3d0; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(167, 243, 208, 0));
from-green-300 --tw-gradient-from: #6ee7b7; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(110, 231, 183, 0));
from-green-400 --tw-gradient-from: #34d399; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(52, 211, 153, 0));
from-green-500 --tw-gradient-from: #10b981; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0));
from-green-600 --tw-gradient-from: #059669; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 150, 105, 0));
from-green-700 --tw-gradient-from: #047857; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(4, 120, 87, 0));
from-green-800 --tw-gradient-from: #065f46; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 95, 70, 0));
from-green-900 --tw-gradient-from: #064e3b; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 78, 59, 0));
from-blue-50 --tw-gradient-from: #eff6ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0));
from-blue-100 --tw-gradient-from: #dbeafe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 234, 254, 0));
from-blue-200 --tw-gradient-from: #bfdbfe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(191, 219, 254, 0));
from-blue-300 --tw-gradient-from: #93c5fd; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 197, 253, 0));
from-blue-400 --tw-gradient-from: #60a5fa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(96, 165, 250, 0));
from-blue-500 --tw-gradient-from: #3b82f6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
from-blue-600 --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
from-blue-700 --tw-gradient-from: #1d4ed8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 78, 216, 0));
from-blue-800 --tw-gradient-from: #1e40af; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30, 64, 175, 0));
from-blue-900 --tw-gradient-from: #1e3a8a; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(30, 58, 138, 0));
from-indigo-50 --tw-gradient-from: #eef2ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(238, 242, 255, 0));
from-indigo-100 --tw-gradient-from: #e0e7ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(224, 231, 255, 0));
from-indigo-200 --tw-gradient-from: #c7d2fe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(199, 210, 254, 0));
from-indigo-300 --tw-gradient-from: #a5b4fc; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(165, 180, 252, 0));
from-indigo-400 --tw-gradient-from: #818cf8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(129, 140, 248, 0));
from-indigo-500 --tw-gradient-from: #6366f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0));
from-indigo-600 --tw-gradient-from: #4f46e5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79, 70, 229, 0));
from-indigo-700 --tw-gradient-from: #4338ca; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(67, 56, 202, 0));
from-indigo-800 --tw-gradient-from: #3730a3; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(55, 48, 163, 0));
from-indigo-900 --tw-gradient-from: #312e81; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(49, 46, 129, 0));
from-purple-50 --tw-gradient-from: #f5f3ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 243, 255, 0));
from-purple-100 --tw-gradient-from: #ede9fe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(237, 233, 254, 0));
from-purple-200 --tw-gradient-from: #ddd6fe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(221, 214, 254, 0));
from-purple-300 --tw-gradient-from: #c4b5fd; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(196, 181, 253, 0));
from-purple-400 --tw-gradient-from: #a78bfa; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(167, 139, 250, 0));
from-purple-500 --tw-gradient-from: #8b5cf6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0));
from-purple-600 --tw-gradient-from: #7c3aed; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(124, 58, 237, 0));
from-purple-700 --tw-gradient-from: #6d28d9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(109, 40, 217, 0));
from-purple-800 --tw-gradient-from: #5b21b6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(91, 33, 182, 0));
from-purple-900 --tw-gradient-from: #4c1d95; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(76, 29, 149, 0));
from-pink-50 --tw-gradient-from: #fdf2f8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 242, 248, 0));
from-pink-100 --tw-gradient-from: #fce7f3; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 231, 243, 0));
from-pink-200 --tw-gradient-from: #fbcfe8; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 207, 232, 0));
from-pink-300 --tw-gradient-from: #f9a8d4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 168, 212, 0));
from-pink-400 --tw-gradient-from: #f472b6; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244, 114, 182, 0));
from-pink-500 --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 72, 153, 0));
from-pink-600 --tw-gradient-from: #db2777; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 39, 119, 0));
from-pink-700 --tw-gradient-from: #be185d; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(190, 24, 93, 0));
from-pink-800 --tw-gradient-from: #9d174d; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(157, 23, 77, 0));
from-pink-900 --tw-gradient-from: #831843; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(131, 24, 67, 0));
via-transparent --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, rgba(0, 0, 0, 0));
via-current --tw-gradient-stops: var(--tw-gradient-from), currentColor, var(--tw-gradient-to, rgba(255, 255, 255, 0));
via-black --tw-gradient-stops: var(--tw-gradient-from), #000, var(--tw-gradient-to, rgba(0, 0, 0, 0));
via-white --tw-gradient-stops: var(--tw-gradient-from), #fff, var(--tw-gradient-to, rgba(255, 255, 255, 0));
via-gray-50 --tw-gradient-stops: var(--tw-gradient-from), #f9fafb, var(--tw-gradient-to, rgba(249, 250, 251, 0));
via-gray-100 --tw-gradient-stops: var(--tw-gradient-from), #f3f4f6, var(--tw-gradient-to, rgba(243, 244, 246, 0));
via-gray-200 --tw-gradient-stops: var(--tw-gradient-from), #e5e7eb, var(--tw-gradient-to, rgba(229, 231, 235, 0));
via-gray-300 --tw-gradient-stops: var(--tw-gradient-from), #d1d5db, var(--tw-gradient-to, rgba(209, 213, 219, 0));
via-gray-400 --tw-gradient-stops: var(--tw-gradient-from), #9ca3af, var(--tw-gradient-to, rgba(156, 163, 175, 0));
via-gray-500 --tw-gradient-stops: var(--tw-gradient-from), #6b7280, var(--tw-gradient-to, rgba(107, 114, 128, 0));
via-gray-600 --tw-gradient-stops: var(--tw-gradient-from), #4b5563, var(--tw-gradient-to, rgba(75, 85, 99, 0));
via-gray-700 --tw-gradient-stops: var(--tw-gradient-from), #374151, var(--tw-gradient-to, rgba(55, 65, 81, 0));
via-gray-800 --tw-gradient-stops: var(--tw-gradient-from), #1f2937, var(--tw-gradient-to, rgba(31, 41, 55, 0));
via-gray-900 --tw-gradient-stops: var(--tw-gradient-from), #111827, var(--tw-gradient-to, rgba(17, 24, 39, 0));
via-red-50 --tw-gradient-stops: var(--tw-gradient-from), #fef2f2, var(--tw-gradient-to, rgba(254, 242, 242, 0));
via-red-100 --tw-gradient-stops: var(--tw-gradient-from), #fee2e2, var(--tw-gradient-to, rgba(254, 226, 226, 0));
via-red-200 --tw-gradient-stops: var(--tw-gradient-from), #fecaca, var(--tw-gradient-to, rgba(254, 202, 202, 0));
via-red-300 --tw-gradient-stops: var(--tw-gradient-from), #fca5a5, var(--tw-gradient-to, rgba(252, 165, 165, 0));
via-red-400 --tw-gradient-stops: var(--tw-gradient-from), #f87171, var(--tw-gradient-to, rgba(248, 113, 113, 0));
via-red-500 --tw-gradient-stops: var(--tw-gradient-from), #ef4444, var(--tw-gradient-to, rgba(239, 68, 68, 0));
via-red-600 --tw-gradient-stops: var(--tw-gradient-from), #dc2626, var(--tw-gradient-to, rgba(220, 38, 38, 0));
via-red-700 --tw-gradient-stops: var(--tw-gradient-from), #b91c1c, var(--tw-gradient-to, rgba(185, 28, 28, 0));
via-red-800 --tw-gradient-stops: var(--tw-gradient-from), #991b1b, var(--tw-gradient-to, rgba(153, 27, 27, 0));
via-red-900 --tw-gradient-stops: var(--tw-gradient-from), #7f1d1d, var(--tw-gradient-to, rgba(127, 29, 29, 0));
via-yellow-50 --tw-gradient-stops: var(--tw-gradient-from), #fffbeb, var(--tw-gradient-to, rgba(255, 251, 235, 0));
via-yellow-100 --tw-gradient-stops: var(--tw-gradient-from), #fef3c7, var(--tw-gradient-to, rgba(254, 243, 199, 0));
via-yellow-200 --tw-gradient-stops: var(--tw-gradient-from), #fde68a, var(--tw-gradient-to, rgba(253, 230, 138, 0));
via-yellow-300 --tw-gradient-stops: var(--tw-gradient-from), #fcd34d, var(--tw-gradient-to, rgba(252, 211, 77, 0));
via-yellow-400 --tw-gradient-stops: var(--tw-gradient-from), #fbbf24, var(--tw-gradient-to, rgba(251, 191, 36, 0));
via-yellow-500 --tw-gradient-stops: var(--tw-gradient-from), #f59e0b, var(--tw-gradient-to, rgba(245, 158, 11, 0));
via-yellow-600 --tw-gradient-stops: var(--tw-gradient-from), #d97706, var(--tw-gradient-to, rgba(217, 119, 6, 0));
via-yellow-700 --tw-gradient-stops: var(--tw-gradient-from), #b45309, var(--tw-gradient-to, rgba(180, 83, 9, 0));
via-yellow-800 --tw-gradient-stops: var(--tw-gradient-from), #92400e, var(--tw-gradient-to, rgba(146, 64, 14, 0));
via-yellow-900 --tw-gradient-stops: var(--tw-gradient-from), #78350f, var(--tw-gradient-to, rgba(120, 53, 15, 0));
via-green-50 --tw-gradient-stops: var(--tw-gradient-from), #ecfdf5, var(--tw-gradient-to, rgba(236, 253, 245, 0));
via-green-100 --tw-gradient-stops: var(--tw-gradient-from), #d1fae5, var(--tw-gradient-to, rgba(209, 250, 229, 0));
via-green-200 --tw-gradient-stops: var(--tw-gradient-from), #a7f3d0, var(--tw-gradient-to, rgba(167, 243, 208, 0));
via-green-300 --tw-gradient-stops: var(--tw-gradient-from), #6ee7b7, var(--tw-gradient-to, rgba(110, 231, 183, 0));
via-green-400 --tw-gradient-stops: var(--tw-gradient-from), #34d399, var(--tw-gradient-to, rgba(52, 211, 153, 0));
via-green-500 --tw-gradient-stops: var(--tw-gradient-from), #10b981, var(--tw-gradient-to, rgba(16, 185, 129, 0));
via-green-600 --tw-gradient-stops: var(--tw-gradient-from), #059669, var(--tw-gradient-to, rgba(5, 150, 105, 0));
via-green-700 --tw-gradient-stops: var(--tw-gradient-from), #047857, var(--tw-gradient-to, rgba(4, 120, 87, 0));
via-green-800 --tw-gradient-stops: var(--tw-gradient-from), #065f46, var(--tw-gradient-to, rgba(6, 95, 70, 0));
via-green-900 --tw-gradient-stops: var(--tw-gradient-from), #064e3b, var(--tw-gradient-to, rgba(6, 78, 59, 0));
via-blue-50 --tw-gradient-stops: var(--tw-gradient-from), #eff6ff, var(--tw-gradient-to, rgba(239, 246, 255, 0));
via-blue-100 --tw-gradient-stops: var(--tw-gradient-from), #dbeafe, var(--tw-gradient-to, rgba(219, 234, 254, 0));
via-blue-200 --tw-gradient-stops: var(--tw-gradient-from), #bfdbfe, var(--tw-gradient-to, rgba(191, 219, 254, 0));
via-blue-300 --tw-gradient-stops: var(--tw-gradient-from), #93c5fd, var(--tw-gradient-to, rgba(147, 197, 253, 0));
via-blue-400 --tw-gradient-stops: var(--tw-gradient-from), #60a5fa, var(--tw-gradient-to, rgba(96, 165, 250, 0));
via-blue-500 --tw-gradient-stops: var(--tw-gradient-from), #3b82f6, var(--tw-gradient-to, rgba(59, 130, 246, 0));
via-blue-600 --tw-gradient-stops: var(--tw-gradient-from), #2563eb, var(--tw-gradient-to, rgba(37, 99, 235, 0));
via-blue-700 --tw-gradient-stops: var(--tw-gradient-from), #1d4ed8, var(--tw-gradient-to, rgba(29, 78, 216, 0));
via-blue-800 --tw-gradient-stops: var(--tw-gradient-from), #1e40af, var(--tw-gradient-to, rgba(30, 64, 175, 0));
via-blue-900 --tw-gradient-stops: var(--tw-gradient-from), #1e3a8a, var(--tw-gradient-to, rgba(30, 58, 138, 0));
via-indigo-50 --tw-gradient-stops: var(--tw-gradient-from), #eef2ff, var(--tw-gradient-to, rgba(238, 242, 255, 0));
via-indigo-100 --tw-gradient-stops: var(--tw-gradient-from), #e0e7ff, var(--tw-gradient-to, rgba(224, 231, 255, 0));
via-indigo-200 --tw-gradient-stops: var(--tw-gradient-from), #c7d2fe, var(--tw-gradient-to, rgba(199, 210, 254, 0));
via-indigo-300 --tw-gradient-stops: var(--tw-gradient-from), #a5b4fc, var(--tw-gradient-to, rgba(165, 180, 252, 0));
via-indigo-400 --tw-gradient-stops: var(--tw-gradient-from), #818cf8, var(--tw-gradient-to, rgba(129, 140, 248, 0));
via-indigo-500 --tw-gradient-stops: var(--tw-gradient-from), #6366f1, var(--tw-gradient-to, rgba(99, 102, 241, 0));
via-indigo-600 --tw-gradient-stops: var(--tw-gradient-from), #4f46e5, var(--tw-gradient-to, rgba(79, 70, 229, 0));
via-indigo-700 --tw-gradient-stops: var(--tw-gradient-from), #4338ca, var(--tw-gradient-to, rgba(67, 56, 202, 0));
via-indigo-800 --tw-gradient-stops: var(--tw-gradient-from), #3730a3, var(--tw-gradient-to, rgba(55, 48, 163, 0));
via-indigo-900 --tw-gradient-stops: var(--tw-gradient-from), #312e81, var(--tw-gradient-to, rgba(49, 46, 129, 0));
via-purple-50 --tw-gradient-stops: var(--tw-gradient-from), #f5f3ff, var(--tw-gradient-to, rgba(245, 243, 255, 0));
via-purple-100 --tw-gradient-stops: var(--tw-gradient-from), #ede9fe, var(--tw-gradient-to, rgba(237, 233, 254, 0));
via-purple-200 --tw-gradient-stops: var(--tw-gradient-from), #ddd6fe, var(--tw-gradient-to, rgba(221, 214, 254, 0));
via-purple-300 --tw-gradient-stops: var(--tw-gradient-from), #c4b5fd, var(--tw-gradient-to, rgba(196, 181, 253, 0));
via-purple-400 --tw-gradient-stops: var(--tw-gradient-from), #a78bfa, var(--tw-gradient-to, rgba(167, 139, 250, 0));
via-purple-500 --tw-gradient-stops: var(--tw-gradient-from), #8b5cf6, var(--tw-gradient-to, rgba(139, 92, 246, 0));
via-purple-600 --tw-gradient-stops: var(--tw-gradient-from), #7c3aed, var(--tw-gradient-to, rgba(124, 58, 237, 0));
via-purple-700 --tw-gradient-stops: var(--tw-gradient-from), #6d28d9, var(--tw-gradient-to, rgba(109, 40, 217, 0));
via-purple-800 --tw-gradient-stops: var(--tw-gradient-from), #5b21b6, var(--tw-gradient-to, rgba(91, 33, 182, 0));
via-purple-900 --tw-gradient-stops: var(--tw-gradient-from), #4c1d95, var(--tw-gradient-to, rgba(76, 29, 149, 0));
via-pink-50 --tw-gradient-stops: var(--tw-gradient-from), #fdf2f8, var(--tw-gradient-to, rgba(253, 242, 248, 0));
via-pink-100 --tw-gradient-stops: var(--tw-gradient-from), #fce7f3, var(--tw-gradient-to, rgba(252, 231, 243, 0));
via-pink-200 --tw-gradient-stops: var(--tw-gradient-from), #fbcfe8, var(--tw-gradient-to, rgba(251, 207, 232, 0));
via-pink-300 --tw-gradient-stops: var(--tw-gradient-from), #f9a8d4, var(--tw-gradient-to, rgba(249, 168, 212, 0));
via-pink-400 --tw-gradient-stops: var(--tw-gradient-from), #f472b6, var(--tw-gradient-to, rgba(244, 114, 182, 0));
via-pink-500 --tw-gradient-stops: var(--tw-gradient-from), #ec4899, var(--tw-gradient-to, rgba(236, 72, 153, 0));
via-pink-600 --tw-gradient-stops: var(--tw-gradient-from), #db2777, var(--tw-gradient-to, rgba(219, 39, 119, 0));
via-pink-700 --tw-gradient-stops: var(--tw-gradient-from), #be185d, var(--tw-gradient-to, rgba(190, 24, 93, 0));
via-pink-800 --tw-gradient-stops: var(--tw-gradient-from), #9d174d, var(--tw-gradient-to, rgba(157, 23, 77, 0));
via-pink-900 --tw-gradient-stops: var(--tw-gradient-from), #831843, var(--tw-gradient-to, rgba(131, 24, 67, 0));
to-transparent --tw-gradient-to: transparent;
to-current --tw-gradient-to: currentColor;
to-black --tw-gradient-to: #000;
to-white --tw-gradient-to: #fff;
to-gray-50 --tw-gradient-to: #f9fafb;
to-gray-100 --tw-gradient-to: #f3f4f6;
to-gray-200 --tw-gradient-to: #e5e7eb;
to-gray-300 --tw-gradient-to: #d1d5db;
to-gray-400 --tw-gradient-to: #9ca3af;
to-gray-500 --tw-gradient-to: #6b7280;
to-gray-600 --tw-gradient-to: #4b5563;
to-gray-700 --tw-gradient-to: #374151;
to-gray-800 --tw-gradient-to: #1f2937;
to-gray-900 --tw-gradient-to: #111827;
to-red-50 --tw-gradient-to: #fef2f2;
to-red-100 --tw-gradient-to: #fee2e2;
to-red-200 --tw-gradient-to: #fecaca;
to-red-300 --tw-gradient-to: #fca5a5;
to-red-400 --tw-gradient-to: #f87171;
to-red-500 --tw-gradient-to: #ef4444;
to-red-600 --tw-gradient-to: #dc2626;
to-red-700 --tw-gradient-to: #b91c1c;
to-red-800 --tw-gradient-to: #991b1b;
to-red-900 --tw-gradient-to: #7f1d1d;
to-yellow-50 --tw-gradient-to: #fffbeb;
to-yellow-100 --tw-gradient-to: #fef3c7;
to-yellow-200 --tw-gradient-to: #fde68a;
to-yellow-300 --tw-gradient-to: #fcd34d;
to-yellow-400 --tw-gradient-to: #fbbf24;
to-yellow-500 --tw-gradient-to: #f59e0b;
to-yellow-600 --tw-gradient-to: #d97706;
to-yellow-700 --tw-gradient-to: #b45309;
to-yellow-800 --tw-gradient-to: #92400e;
to-yellow-900 --tw-gradient-to: #78350f;
to-green-50 --tw-gradient-to: #ecfdf5;
to-green-100 --tw-gradient-to: #d1fae5;
to-green-200 --tw-gradient-to: #a7f3d0;
to-green-300 --tw-gradient-to: #6ee7b7;
to-green-400 --tw-gradient-to: #34d399;
to-green-500 --tw-gradient-to: #10b981;
to-green-600 --tw-gradient-to: #059669;
to-green-700 --tw-gradient-to: #047857;
to-green-800 --tw-gradient-to: #065f46;
to-green-900 --tw-gradient-to: #064e3b;
to-blue-50 --tw-gradient-to: #eff6ff;
to-blue-100 --tw-gradient-to: #dbeafe;
to-blue-200 --tw-gradient-to: #bfdbfe;
to-blue-300 --tw-gradient-to: #93c5fd;
to-blue-400 --tw-gradient-to: #60a5fa;
to-blue-500 --tw-gradient-to: #3b82f6;
to-blue-600 --tw-gradient-to: #2563eb;
to-blue-700 --tw-gradient-to: #1d4ed8;
to-blue-800 --tw-gradient-to: #1e40af;
to-blue-900 --tw-gradient-to: #1e3a8a;
to-indigo-50 --tw-gradient-to: #eef2ff;
to-indigo-100 --tw-gradient-to: #e0e7ff;
to-indigo-200 --tw-gradient-to: #c7d2fe;
to-indigo-300 --tw-gradient-to: #a5b4fc;
to-indigo-400 --tw-gradient-to: #818cf8;
to-indigo-500 --tw-gradient-to: #6366f1;
to-indigo-600 --tw-gradient-to: #4f46e5;
to-indigo-700 --tw-gradient-to: #4338ca;
to-indigo-800 --tw-gradient-to: #3730a3;
to-indigo-900 --tw-gradient-to: #312e81;
to-purple-50 --tw-gradient-to: #f5f3ff;
to-purple-100 --tw-gradient-to: #ede9fe;
to-purple-200 --tw-gradient-to: #ddd6fe;
to-purple-300 --tw-gradient-to: #c4b5fd;
to-purple-400 --tw-gradient-to: #a78bfa;
to-purple-500 --tw-gradient-to: #8b5cf6;
to-purple-600 --tw-gradient-to: #7c3aed;
to-purple-700 --tw-gradient-to: #6d28d9;
to-purple-800 --tw-gradient-to: #5b21b6;
to-purple-900 --tw-gradient-to: #4c1d95;
to-pink-50 --tw-gradient-to: #fdf2f8;
to-pink-100 --tw-gradient-to: #fce7f3;
to-pink-200 --tw-gradient-to: #fbcfe8;
to-pink-300 --tw-gradient-to: #f9a8d4;
to-pink-400 --tw-gradient-to: #f472b6;
to-pink-500 --tw-gradient-to: #ec4899;
to-pink-600 --tw-gradient-to: #db2777;
to-pink-700 --tw-gradient-to: #be185d;
to-pink-800 --tw-gradient-to: #9d174d;
to-pink-900 --tw-gradient-to: #831843;

开始颜色

使用 ​from-{color}​ 功能类设置渐变的起始颜色。


<div class="bg-gradient-to-r from-red-500 ..."></div>

结束颜色

使用 ​to-{color}​ 实用程序设置渐变的结束颜色。


<div class="bg-gradient-to-r from-green-400 to-blue-500 ..."></div>

默认情况下,渐变效果不会从透明中淡入。要从透明渐变,请反转渐变方向,并使用 ​from-{color}​ 功能类。

中间色

使用 ​via-{color}​ 功能类为渐变添加中间色。


<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 ..."></div>

如果没有出现 ​to-{color}​,带有 ​from-{color}​ 和 ​via-{color}​ 的梯度将默认为淡出为透明。

渐变为透明

渐变默认为透明,不需要你明确添加 ​to-transparent​。Tailwind根据起始颜色智能地计算出正确的透明值,以避免Safari中的一个bug,该bug导致导致仅仅是 ​transparent ​的关键词褪去了灰色,这看起来很糟糕。

不要显式添加`to-transparent`

<div class="bg-gradient-to-r from-blue-500 to-transparent">
  <!-- ... -->
</div>

只指定一个颜色,并自动淡化为透明。

<div class="bg-gradient-to-r from-blue-500">
  <!-- ... -->
</div>

响应式

要控制元素在特定断点处的渐变色停止,可在任何现有的渐变色停止功能类中添加 ​{screen}:​ 前缀。例如,使用 ​md:from-green-500​ 来应用 ​from-green-500​ 功能类,只在中等大小的屏幕及以上。

<div class="bg-gradient-to-r from-purple-400 md:from-yellow-500"></div>

关于 Tailwind 的响应式设计功能的更多信息,请查看响应式设计文档。

悬停

要控制元素在悬停时的渐变色停止,请在任何现有的渐变色停止功能类中添加 ​hover:​ 前缀。例如,使用 ​hover:bg-blue-500​ 在悬停时应用 ​bg-blue-500​ 功能类。


<button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-pink-500 hover:to-yellow-500 ...">
  Hover me
</button>

通过在 ​focus:​ 前缀之前添加响应的 ​{screen}:​ 前缀,悬停功能类也可以与响应功能类相结合。

<button class="... md:from-blue-500 md:hover:from-blue-700 ...">Button</button>

聚焦

要在焦点上控制元素的渐变色停顿,可在任何现有的渐变色停顿功能类中添加 ​focus:​ 前缀。例如,使用 ​focus:bg-blue-500​ 在焦点上应用 ​bg-blue-500​ 功能类。


<button type="button" class="bg-gradient-to-r from-green-400 to-blue-500 focus:from-pink-500 focus:to-yellow-500">
  Focus me
</button>

自定义

背景颜色

默认情况下, Tailwind 将整个默认调色板作为渐变色停止。

  // tailwind.config.js
  module.exports = {
    theme: {
      gradientColorStops: theme => ({
       ...theme('colors'),
       'primary': '#3490dc',
       'secondary': '#ffed4a',
       'danger': '#e3342f',
      })
    }
  }

变体

默认情况下, 针对 gradient color stops 功能类,只生成 responsive, dark mode (if enabled), hover and focus 变体。

您可以通过修改您的 ​tailwind.config.js​ 文件中的 ​variants ​部分中的 ​gradientColorStops ​属性来控制为 gradient color stops 功能生成哪些变体。

例如,这个配置也将生成 active and group-hover 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       gradientColorStops: ['active', 'group-hover'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 gradient color stops 功能,您可以通过在配置文件的 ​corePlugins ​部分将 ​gradientColorStops ​属性设置为 ​false ​来完全禁用它们:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     gradientColorStops: false,
    }
  }


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号