Example

--------------------------
Tailwind.config.js
--------------------------


const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable')

const defaultCustom = '#005aff'

module.exports = {
    mode: 'jit',
    content: [
        './resources/views/**/*.blade.php', './resources/js/**/*.vue'
    ],
    darkMode: 'class',
    theme: {
        variables: {
            DEFAULT: {
                colors: {
                    custom: defaultCustom
                },
            }
        },
        extend: {
            colors: {
                custom: {
                    DEFAULT: colorVariable('--colors-custom')
                },
                ...
    plugins: [
        require('@mertasan/tailwindcss-variables')({
            colorVariables: true
        }),
                
//etc etc



--------------------------
Item.blade.php
--------------------------

<div class="bg-custom" style="--colors-custom-rgb: 255, 0, 0">
This is now red
</div>