:root {
    .bg-tailwind-transparent {
        background-color: transparent;
    }

    .bg-tailwind-white {
        background: white;
    }
    /*
  ==============================================================
        TAILWIND SLATE 
  ==============================================================
    */
    .bg-tailwind-slate-050 {
        background: var(--tailwind-slate-050);
    }

    .bg-tailwind-slate-100 {
        background: var(--tailwind-slate-100);
    }

    .bg-tailwind-slate-200 {
        background: var(--tailwind-slate-200);
    }

    .bg-tailwind-slate-300 {
        background: var(--tailwind-slate-300);
    }

    .bg-tailwind-slate-400 {
        background: var(--tailwind-slate-400);
    }

    .bg-tailwind-slate-500 {
        background: var(--tailwind-slate-500);
    }

    .bg-tailwind-slate-600 {
        background: var(--tailwind-slate-600);
    }

    .bg-tailwind-slate-700 {
        background: var(--tailwind-slate-700);
    }

    .bg-tailwind-slate-800 {
        background: var(--tailwind-slate-800);
    }

    .bg-tailwind-slate-900 {
        background: var(--tailwind-slate-900);
    }

    .bg-tailwind-slate-950 {
        background: var(--tailwind-slate-950);
    }
    /*
        ------------------------------------------------------
        TAILWIND SLATE FOCUS
        ------------------------------------------------------
    */
    .focus\:bg-tailwind-slate-050:focus {
        background: var(--tailwind-slate-050);
    }

    .focus\:bg-tailwind-slate-100:focus {
        background: var(--tailwind-slate-100);
    }

    .focus\:bg-tailwind-slate-200:focus {
        background: var(--tailwind-slate-200);
    }

    .focus\:bg-tailwind-slate-300:focus {
        background: var(--tailwind-slate-300);
    }

    .focus\:bg-tailwind-slate-400:focus {
        background: var(--tailwind-slate-400);
    }

    .focus\:bg-tailwind-slate-500:focus {
        background: var(--tailwind-slate-500);
    }

    .focus\:bg-tailwind-slate-600:focus {
        background: var(--tailwind-slate-600);
    }

    .focus\:bg-tailwind-slate-700:focus {
        background: var(--tailwind-slate-700);
    }

    .focus\:bg-tailwind-slate-800:focus {
        background: var(--tailwind-slate-800);
    }

    .focus\:bg-tailwind-slate-900:focus {
        background: var(--tailwind-slate-900);
    }

    .focus\:bg-tailwind-slate-950:focus {
        background: var(--tailwind-slate-950);
    }
    /*
  ==============================================================
        TAILWIND GRAY 
  ==============================================================
    */
    .bg-tailwind-gray-050 {
        background: var(--tailwind-gray-050);
    }

    .bg-tailwind-gray-100 {
        background: var(--tailwind-gray-100);
    }

    .bg-tailwind-gray-200 {
        background: var(--tailwind-gray-200);
    }

    .bg-tailwind-gray-300 {
        background: var(--tailwind-gray-300);
    }

    .bg-tailwind-gray-400 {
        background: var(--tailwind-gray-400);
    }

    .bg-tailwind-gray-500 {
        background: var(--tailwind-gray-500);
    }

    .bg-tailwind-gray-600 {
        background: var(--tailwind-gray-600);
    }

    .bg-tailwind-gray-700 {
        background: var(--tailwind-gray-700);
    }

    .bg-tailwind-gray-800 {
        background: var(--tailwind-gray-800);
    }

    .bg-tailwind-gray-900 {
        background: var(--tailwind-gray-900);
    }

    .bg-tailwind-gray-950 {
        background: var(--tailwind-gray-950);
    }
    /* TAILWIND BLUE */
    .bg-tailwind-blue-050 {
        background: var(--tailwind-blue-050);
    }

    .bg-tailwind-blue-100 {
        background: var(--tailwind-blue-100);
    }

    .bg-tailwind-blue-200 {
        background: var(--tailwind-blue-200);
    }

    .bg-tailwind-blue-300 {
        background: var(--tailwind-blue-300);
    }

    .bg-tailwind-blue-400 {
        background: var(--tailwind-blue-400);
    }

    .bg-tailwind-blue-500 {
        background: var(--tailwind-blue-500);
    }

    .bg-tailwind-blue-600 {
        background: var(--tailwind-blue-600);
    }

    .bg-tailwind-blue-700 {
        background: var(--tailwind-blue-700);
    }

    .bg-tailwind-blue-800 {
        background: var(--tailwind-blue-800);
    }

    .bg-tailwind-blue-900 {
        background: var(--tailwind-blue-900);
    }

    .bg-tailwind-blue-950 {
        background: var(--tailwind-blue-950);
    }
    /* TAILWIND VIOLET */
    .bg-tailwind-violet-050 {
        background: var(--tailwind-violet-050);
    }

    .bg-tailwind-violet-100 {
        background: var(--tailwind-violet-100);
    }

    .bg-tailwind-violet-200 {
        background: var(--tailwind-violet-200);
    }

    .bg-tailwind-violet-300 {
        background: var(--tailwind-violet-300);
    }

    .bg-tailwind-violet-400 {
        background: var(--tailwind-violet-400);
    }

    .bg-tailwind-violet-500 {
        background: var(--tailwind-violet-500);
    }

    .bg-tailwind-violet-600 {
        background: var(--tailwind-violet-600);
    }

    .bg-tailwind-violet-700 {
        background: var(--tailwind-violet-700);
    }

    .bg-tailwind-violet-800 {
        background: var(--tailwind-violet-800);
    }

    .bg-tailwind-violet-900 {
        background: var(--tailwind-violet-900);
    }

    .bg-tailwind-violet-950 {
        background: var(--tailwind-violet-950);
    }
    /* TAILWIND RED */
    .bg-tailwind-red-050 {
        background: var(--tailwind-red-050);
    }

    .bg-tailwind-red-100 {
        background: var(--tailwind-red-100);
    }

    .bg-tailwind-red-200 {
        background: var(--tailwind-red-200);
    }

    .bg-tailwind-red-300 {
        background: var(--tailwind-red-300);
    }

    .bg-tailwind-red-400 {
        background: var(--tailwind-red-400);
    }

    .bg-tailwind-red-500 {
        background: var(--tailwind-red-500);
    }

    .bg-tailwind-red-600 {
        background: var(--tailwind-red-600);
    }

    .bg-tailwind-red-700 {
        background: var(--tailwind-red-700);
    }

    .bg-tailwind-red-800 {
        background: var(--tailwind-red-800);
    }

    .bg-tailwind-red-900 {
        background: var(--tailwind-red-900);
    }

    .bg-tailwind-red-950 {
        background: var(--tailwind-red-950);
    }
    /* TAILWIND AMBER */
    .bg-tailwind-amber-050 {
        background: var(--tailwind-amber-050);
    }

    .bg-tailwind-amber-100 {
        background: var(--tailwind-amber-100);
    }

    .bg-tailwind-amber-200 {
        background: var(--tailwind-amber-200);
    }

    .bg-tailwind-amber-300 {
        background: var(--tailwind-amber-300);
    }

    .bg-tailwind-amber-400 {
        background: var(--tailwind-amber-400);
    }

    .bg-tailwind-amber-500 {
        background: var(--tailwind-amber-500);
    }

    .bg-tailwind-amber-600 {
        background: var(--tailwind-amber-600);
    }

    .bg-tailwind-amber-700 {
        background: var(--tailwind-amber-700);
    }

    .bg-tailwind-amber-800 {
        background: var(--tailwind-amber-800);
    }

    .bg-tailwind-amber-900 {
        background: var(--tailwind-amber-900);
    }

    .bg-tailwind-amber-950 {
        background: var(--tailwind-amber-950);
    }
    /* TAILWIND GREEN */
    .bg-tailwind-green-050 {
        background: var(--tailwind-green-050);
    }

    .bg-tailwind-green-100 {
        background: var(--tailwind-green-100);
    }

    .bg-tailwind-green-200 {
        background: var(--tailwind-green-200);
    }

    .bg-tailwind-green-300 {
        background: var(--tailwind-green-300);
    }

    .bg-tailwind-green-400 {
        background: var(--tailwind-green-400);
    }

    .bg-tailwind-green-500 {
        background: var(--tailwind-green-500);
    }

    .bg-tailwind-green-600 {
        background: var(--tailwind-green-600);
    }

    .bg-tailwind-green-700 {
        background: var(--tailwind-green-700);
    }

    .bg-tailwind-green-800 {
        background: var(--tailwind-green-800);
    }

    .bg-tailwind-green-900 {
        background: var(--tailwind-green-900);
    }

    .bg-tailwind-green-950 {
        background: var(--tailwind-green-950);
    }
    /* TAILWIND YELLOW */
    .bg-tailwind-yellow-050 {
        background: var(--tailwind-yellow-050);
    }

    .bg-tailwind-yellow-100 {
        background: var(--tailwind-yellow-100);
    }

    .bg-tailwind-yellow-200 {
        background: var(--tailwind-yellow-200);
    }

    .bg-tailwind-yellow-300 {
        background: var(--tailwind-yellow-300);
    }

    .bg-tailwind-yellow-400 {
        background: var(--tailwind-yellow-400);
    }

    .bg-tailwind-yellow-500 {
        background: var(--tailwind-yellow-500);
    }

    .bg-tailwind-yellow-600 {
        background: var(--tailwind-yellow-600);
    }

    .bg-tailwind-yellow-700 {
        background: var(--tailwind-yellow-700);
    }

    .bg-tailwind-yellow-800 {
        background: var(--tailwind-yellow-800);
    }

    .bg-tailwind-yellow-900 {
        background: var(--tailwind-yellow-900);
    }

    .bg-tailwind-yellow-950 {
        background: var(--tailwind-yellow-950);
    }
}
