Color Utilities

Background Colors

Apply background colors to elements:

<div class="bismillah-bg-white">White background</div>
<div class="bismillah-bg-gray-100">Light gray background</div>
<div class="bismillah-bg-blue-500">Blue background</div>
<div class="bismillah-bg-green-600">Green background</div>
<div class="bismillah-bg-red-500">Red background</div>

Text Colors

Control text color:

<p class="bismillah-text-gray-900">Dark text</p>
<p class="bismillah-text-gray-600">Medium text</p>
<p class="bismillah-text-blue-600">Blue text</p>
<p class="bismillah-text-green-600">Green text</p>
<p class="bismillah-text-red-600">Red text</p>
<p class="bismillah-text-white">White text</p>

Border Colors

Apply border colors:

<div class="bismillah-border-2 bismillah-border-gray-300">Gray border</div>
<div class="bismillah-border-2 bismillah-border-blue-500">Blue border</div>
<div class="bismillah-border-2 bismillah-border-red-500">Red border</div>
<div class="bismillah-border-t bismillah-border-green-600">Top green border</div>

Opacity

Control color opacity:

<div class="bismillah-bg-blue-500 bismillah-opacity-100">100% opacity</div>
<div class="bismillah-bg-blue-500 bismillah-opacity-75">75% opacity</div>
<div class="bismillah-bg-blue-500 bismillah-opacity-50">50% opacity</div>
<div class="bismillah-bg-blue-500 bismillah-opacity-25">25% opacity</div>
<div class="bismillah-bg-blue-500 bismillah-opacity-0">0% opacity</div>

Color Palette

BismillahCSS includes a comprehensive color palette:

<!-- Each color has multiple shades -->
<div class="bismillah-bg-blue-50">Very light blue</div>
<div class="bismillah-bg-blue-500">Medium blue</div>
<div class="bismillah-bg-blue-900">Dark blue</div>

<!-- Works with all properties -->
<p class="bismillah-text-red-600">Red text</p>
<div class="bismillah-border bismillah-border-green-500">Green border</div>

Interactive States with Colors

Combine colors with pseudo-classes:

<!-- Button with hover color change -->
<button class="bismillah-bg-blue-600 hover:bismillah-bg-blue-700 active:bismillah-bg-blue-800 bismillah-text-white bismillah-px-4 bismillah-py-2 bismillah-rounded">
  Click me
</button>

<!-- Link with hover text color -->
<a href="#" class="bismillah-text-blue-600 hover:bismillah-text-blue-800">
  Link
</a>

<!-- Card with hover effects -->
<div class="bismillah-bg-white hover:bismillah-bg-gray-50 bismillah-border bismillah-border-gray-200 hover:bismillah-border-gray-300 bismillah-p-4 bismillah-rounded">
  Hover me
</div>

Dark Mode Colors

Use appropriate colors for dark mode:

<!-- Light background in light mode, dark in dark mode -->
<div class="bismillah-bg-white dark:bismillah-bg-gray-900">
  <!-- Light text in light mode, white in dark mode -->
  <p class="bismillah-text-gray-900 dark:bismillah-text-white">
    Content
  </p>
</div>

Semantic Colors

Use colors semantically:

<!-- Success state -->
<div class="bismillah-text-green-600">✓ Success!</div>

<!-- Error state -->
<div class="bismillah-text-red-600">✗ Error</div>

<!-- Warning state -->
<div class="bismillah-text-yellow-600">⚠ Warning</div>

<!-- Info state -->
<div class="bismillah-text-blue-600">ℹ Information</div>

Common Patterns

<div class="bismillah-bg-blue-50 bismillah-border-l-4 bismillah-border-blue-500 bismillah-p-4 bismillah-text-blue-800">
  This is an informational alert
</div>

<span class="bismillah-bg-blue-200 bismillah-text-blue-800 bismillah-px-3 bismillah-py-1 bismillah-rounded-full text-sm">
  Badge
</span>

<div class="bismillah-bg-gradient-to-r bismillah-from-blue-500 bismillah-to-purple-600 bismillah-text-white bismillah-p-8">
  Gradient background
</div>