fadgram-ui/utilities/index.css

Fadgram UI is a Tailwind CSS plugin that provides a set of custom utility classes to enhance your web development experience. This plugin is designed to work seamlessly with Tailwind CSS, allowing you to quickly and easily style your web applications. ![F

@utility container {
    margin-inline: auto;
    padding-inline: 2rem;
}

@utility text-bg-* {
    color: --value(--color-bg-*);
}

@utility bg-gradient {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

@utility bg-gradient-* {
    background-color: --value(--color-*);
    /*background-image: linear-gradient(to right bottom, --value(--color-*-400), --value(--color-*-700));*/
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

@utility flex-space-* {
    @apply flex items-center;

    @variant rtl {
        @apply space-x-reverse;
    }
}

@utility flex-space-0 {
    @apply space-x-0;
}

@utility flex-space-1 {
    @apply space-x-1;
}

@utility flex-space-2 {
    @apply space-x-2;
}

@utility flex-space-3 {
    @apply space-x-3;
}

@utility flex-space-4 {
    @apply space-x-4;
}

@utility flex-space-5 {
    @apply space-x-5;
}

@utility flex-space-6 {
    @apply space-x-6;
}

@utility flex-space-7 {
    @apply space-x-7;
}

@utility flex-space-8 {
    @apply space-x-8;
}

@utility flex-space-9 {
    @apply space-x-9;
}

@utility flex-space-10 {
    @apply space-x-10;
}

@utility flex-space-11 {
    @apply space-x-11;
}

@utility flex-space-12 {
    @apply space-x-12;
}

@utility pill {
    border-radius: calc(infinity * 1px);
}

@utility text-xxs {
    font-size: 0.5rem;
}

@utility fade-in {
    @apply animate-fade-in;
}

@utility fade-out {
    @apply animate-fade-out;
}

@utility text-gradient {
    @apply bg-gradient-to-r bg-clip-text text-transparent;
}

@utility text-gradient-* {
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(to right bottom, --value(--color-*-300), --value(--color-*-700));
}

@utility text-gradient-to-l {
    @apply bg-gradient-to-l;
}

@utility text-gradient-to-tl {
    @apply bg-gradient-to-tl;
}

@utility text-gradient-to-bl {
    @apply bg-gradient-to-bl;
}

@utility text-gradient-to-r {
    @apply bg-gradient-to-r;
}

@utility text-gradient-to-tr {
    @apply bg-gradient-to-tr;
}

@utility text-gradient-to-br {
    @apply bg-gradient-to-br;
}