Colors

Color Utilities

Convey meaning through color with a handful of color utility classes.

Rock includes an expertly-crafted default color palette, inspired by Tailwind CSS, that is a great starting point if you don’t have your own specific branding in mind.

bg-primary
bg-success
bg-info
bg-warning
bg-danger
bg-critical
bg-transparent
bg-current
bg-black
bg-white
bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-gray-800
bg-gray-900
bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500
bg-red-600
bg-red-700
bg-red-800
bg-red-900
bg-orange-100
bg-orange-200
bg-orange-300
bg-orange-400
bg-orange-500
bg-orange-600
bg-orange-700
bg-orange-800
bg-orange-900
bg-yellow-100
bg-yellow-200
bg-yellow-300
bg-yellow-400
bg-yellow-500
bg-yellow-600
bg-yellow-700
bg-yellow-800
bg-yellow-900
bg-green-100
bg-green-200
bg-green-300
bg-green-400
bg-green-500
bg-green-600
bg-green-700
bg-green-800
bg-green-900
bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500
bg-blue-600
bg-blue-700
bg-blue-800
bg-blue-900
bg-indigo-100
bg-indigo-200
bg-indigo-300
bg-indigo-400
bg-indigo-500
bg-indigo-600
bg-indigo-700
bg-indigo-800
bg-indigo-900
bg-purple-100
bg-purple-200
bg-purple-300
bg-purple-400
bg-purple-500
bg-purple-600
bg-purple-700
bg-purple-800
bg-purple-900
bg-pink-100
bg-pink-200
bg-pink-300
bg-pink-400
bg-pink-500
bg-pink-600
bg-pink-700
bg-pink-800
bg-pink-900
text-primary
text-success
text-info
text-warning
text-danger
text-critical
text-transparent
text-current
text-black
text-white
text-gray-100
text-gray-200
text-gray-300
text-gray-400
text-gray-500
text-gray-600
text-gray-700
text-gray-800
text-gray-900
text-red-100
text-red-200
text-red-300
text-red-400
text-red-500
text-red-600
text-red-700
text-red-800
text-red-900
text-orange-100
text-orange-200
text-orange-300
text-orange-400
text-orange-500
text-orange-600
text-orange-700
text-orange-800
text-orange-900
text-yellow-100
text-yellow-200
text-yellow-300
text-yellow-400
text-yellow-500
text-yellow-600
text-yellow-700
text-yellow-800
text-yellow-900
text-green-100
text-green-200
text-green-300
text-green-400
text-green-500
text-green-600
text-green-700
text-green-800
text-green-900
text-teal-100
text-teal-200
text-teal-300
text-teal-400
text-teal-500
text-teal-600
text-teal-700
text-teal-800
text-teal-900
text-blue-100
text-blue-200
text-blue-300
text-blue-400
text-blue-500
text-blue-600
text-blue-700
text-blue-800
text-blue-900
text-indigo-100
text-indigo-200
text-indigo-300
text-indigo-400
text-indigo-500
text-indigo-600
text-indigo-700
text-indigo-800
text-indigo-900
text-purple-100
text-purple-200
text-purple-300
text-purple-400
text-purple-500
text-purple-600
text-purple-700
text-purple-800
text-purple-900
text-pink-100
text-pink-200
text-pink-300
text-pink-400
text-pink-500
text-pink-600
text-pink-700
text-pink-800
text-pink-900
border-primary
border-success
border-info
border-warning
border-danger
border-critical
border-transparent
border-black
border-white
border-gray-100
border-gray-200
border-gray-300
border-gray-400
border-gray-500
border-gray-600
border-gray-700
border-gray-800
border-gray-900
border-red-100
border-red-200
border-red-300
border-red-400
border-red-500
border-red-600
border-red-700
border-red-800
border-red-900
border-orange-100
border-orange-200
border-orange-300
border-orange-400
border-orange-500
border-orange-600
border-orange-700
border-orange-800
border-orange-900
border-yellow-100
border-yellow-200
border-yellow-300
border-yellow-400
border-yellow-500
border-yellow-600
border-yellow-700
border-yellow-800
border-yellow-900
border-green-100
border-green-200
border-green-300
border-green-400
border-green-500
border-green-600
border-green-700
border-green-800
border-green-900
border-teal-100
border-teal-200
border-teal-300
border-teal-400
border-teal-500
border-teal-600
border-teal-700
border-teal-800
border-teal-900
border-blue-100
border-blue-200
border-blue-300
border-blue-400
border-blue-500
border-blue-600
border-blue-700
border-blue-800
border-blue-900
border-indigo-100
border-indigo-200
border-indigo-300
border-indigo-400
border-indigo-500
border-indigo-600
border-indigo-700
border-indigo-800
border-indigo-900
border-purple-100
border-purple-200
border-purple-300
border-purple-400
border-purple-500
border-purple-600
border-purple-700
border-purple-800
border-purple-900
border-pink-100
border-pink-200
border-pink-300
border-pink-400
border-pink-500
border-pink-600
border-pink-700
border-pink-800
border-pink-900