Tailwind Configuratie - Custom Gradients Toevoegen

Step 1

Project Setup & Configuration Export

Transform your KleurFlow gradient presets into production-ready Tailwind utility classes in under three minutes.

After finalizing your palette in the KleurFlow dashboard, click the Export Config button on the top-right toolbar. This generates a minified kleurflow-theme.json file containing optimized HSL and RGBA stop values. Place this file directly in your project root alongside package.json. Ensure your environment runs Tailwind CSS v3.4.0 or higher, as the dynamic theme() extension requires the latest JIT compiler.

Step 2

Import & HTML Implementation

Bridge the JSON export with your build pipeline using native Node.js resolution.

Modify your tailwind.config.js to dynamically load the gradient stops. The example below demonstrates a standard Vite + React setup, but the pattern applies identically to Next.js and Astro.

import kleurflowGradients from './kleurflow-theme.json';

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      backgroundImage: kleurflowGradients.backgroundImage,
      colors: kleurflowGradients.colors
    }
  },
  plugins: []
};

Once compiled, apply the utilities directly to any block element. The auto-generated classes follow the bg-[name]-[variant] naming convention.

<div class="min-h-screen bg-kf-aurora-drift p-8">
  <section class="bg-kf-sunset-ember rounded-xl p-6">
    <h2 class="text-2xl font-bold text-white">Gradient Active</h2>
  </section>
</div>

Support

Troubleshooting & Optimization

Resolve common build pipeline conflicts and ensure optimal CSS output.