Colors
The colors that style most AiraCSS elements and components
Text colors
To apply a text color, just append text-*
to the color class like this: text-primary
primary color
secondary color
darkcolor
light color
success color
info color
warning color
error color
<p class="text-primary"></p>
<p class="text-secondary"></p>
<p class="text-dark"></p>
<p class="text-light"></p>
<p class="text-success"></p>
<p class="text-info"></p>
<p class="text-warning"></p>
<p class="text-error"></p>
text-primary
Other Text colors
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-red-1000
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
text-pink-1000
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-orange-1000
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-yellow-1000
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-purple-1000
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-green-1000
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-blue-1000
text-light-blue-100
text-light-blue-200
text-light-blue-300
text-light-blue-400
text-light-blue-500
text-brown-100
text-brown-200
text-brown-300
text-brown-400
text-brown-500
text-gray-100
text-gray-200
text-gray-300
text-gray-400
text-gray-500
text-gray-600
text-gray-700
text-gray-800