Enhance Your Tailwind UI With Brighter Color Utilities

tailwind-plugin-supercolors is a Tailwind CSS plugin that allows you to apply brighter, more intense colors to your web projects.

This plugin extends Tailwind’s default color palette by adding a super- prefix to all color utility classes.

You can use these super- classes just like standard Tailwind color classes, but they render with increased brightness.

GitHub Repo

Live Demo

Features

🎨 Prefixed Color Utilities: Access brighter color variants using the super- prefix (e.g., bg-super-red-500).

💡 Element-Wide Brightness: Apply the super class to any parent element to increase the brightness of all its children, including images or canvas elements.

⚙️ Easy Integration: Works with both Tailwind CSS v3 and v4 configurations.

🔢 Adjustable Brightness: Fine-tune the intensity of super colors by adding a strength modifier (e.g., bg-super-50-red-500).

🚀 Optional JS Runtime: Import a small JavaScript file to unlock brightness levels beyond standard CSS capabilities for compatible hardware.

Use Cases

Highlighting Key UI Elements: Make buttons, alerts, or notifications stand out with super-bright colors to grab user attention immediately. For example, use bg-super-blue-500 for a primary call-to-action button.
Data Visualization: Enhance charts or graphs by using super colors to represent specific data points or ranges that require emphasis. A critical threshold on a graph could use text-super-red-600.
Creative Effects: Apply the super class to containers holding images, videos, or canvas elements to achieve striking visual effects or simulate HDR lighting within web interfaces or simple web games.
Accessible Design Accents: Use moderately increased brightness (super-25- or super-50-) to add subtle emphasis without compromising readability for users sensitive to extremely bright colors.

Installation

npm install tailwind-plugin-supercolors
# or
yarn add tailwind-plugin-supercolors
# or
pnpm add tailwind-plugin-supercolors

Usage

1. Import the runtime module in your main JavaScript file:

import 'tailwind-plugin-supercolors';

2. Integrate the plugin into your Tailwind setup.

For Tailwind v4+:

Add the @plugin directive to your main CSS file:

@import "tailwindcss";
@plugin "tailwind-plugin-supercolors";
@theme {
  // Your theme configuration
}

For Tailwind v3:

Add the plugin to the plugins array in your tailwind.config.js file:

module.exports = {
  // content, theme, etc.
  plugins: [
    require('tailwind-plugin-supercolors'),
    // ...other plugins
  ],
}

3. Replace standard Tailwind color classes with their super- prefixed equivalents:

<!-- Standard colors -->
<div class="bg-red-500 text-blue-700">Standard Colors</div>
<!-- Super colors -->
<div class="bg-super-red-500 text-super-blue-700">Super Colors</div>

4. You can specify a brightness level (percentage) between the super- prefix and the color name:

<!-- 50% brightness increase -->
<div class="bg-super-50-red-500">Moderately Brighter Red</div>
<!-- 25% brightness increase -->
<div class="text-super-25-green-600">Slightly Brighter Green</div>

5. Apply the super class directly to an element to increase the brightness of its content:

<div class="super p-4 border border-gray-300">
  <p>This text is brighter.</p>
  <img src="your-image.jpg" alt="A brighter image">
  <canvas id="myCanvas"></canvas> <!-- Canvas content will appear brighter -->
</div>

Related Resources

Tailwind CSS Documentation: https://tailwindcss.com/docs – Official documentation for Tailwind CSS framework configuration and utility classes.
Web Fundamentals – Color: https://web.dev/learn/design/color/ – Learn fundamental concepts about color theory and its application on the web.
tailwindcss-filters – A plugin that adds CSS filter utilities to Tailwind, complementing the color enhancements from supercolors.
GitHub Repository
tailwindcss-gradients – Extends Tailwind with advanced gradient utilities that can be combined with supercolors for stunning effects.
GitHub Repository