✏️ Editing: tailwind-class.scss Writable

// global variables.
:root {
    --eab-primary-color: #FF5B2E;
    --eab-primary-color-hover: #e64e25;
    --eab-link-color: #1A74E4;
    --eab-primary-color-70: #ef7756;
    --eab-primary-text-color: #2f2f2f;
    --eab-primary-bg-color: #EEEEEE;
    --eab-border-color: #E2E2E2;
    --eab-gradient-color: linear-gradient(90deg, rgba(255, 71, 81, 0.4), rgba(255, 145, 10, 0.4));
}

/* Display utilities */
.sp {
    &-d-hidden {
        display: none;
    }

&-d-grid {
        display: grid;
    }

&-d-flex {
        display: flex;
    }

&-d-i-flex {
        display: inline-flex;
    }

&-d-block {
        display: block;
    }

&-d-i-block {
        display: inline-block;
    }

&-d-disabled {
        opacity: 0.4;
        pointer-events: none;
    }

&-justify-start,
    &-justify-top,
    &-justify-left {
        justify-content: start;
    }

&-justify-between {
        justify-content: space-between;
    }

&-justify-center {
        justify-content: center;
    }

&-justify-end,
    &-justify-bottom,
    &-justify-right {
        justify-content: end;
    }

&-align-start,
    &-align-left {
        align-items: start;
    }

&-align-center {
        align-items: center;
    }

&-align-end,
    &-align-right {
        align-items: end;
    }

&-row-reverse {
        flex-direction: row-reverse;
    }

&-flex-col {
        flex-direction: column;
    }

&-col-reverse {
        flex-direction: column-reverse;
    }
}

.sp {

// gap.
    &-gap-2px {
        gap: 2px;
    }

&-gap-4px {
        gap: 4px;
    }

&-gap-6px {
        gap: 6px;
    }

&-gap-8px {
        gap: 8px;
    }

&-gap-10px {
        gap: 10px;
    }

&-gap-12px {
        gap: 12px;
    }

&-gap-20px {
        gap: 20px;
    }
}

// width .
.sp {
    &-w-1\/3 {
        width: 33.3333%;
    }

&-w-1\/2 {
        width: 50%;
    }

&-w-full {
        width: 100%;
    }
}

.sp-mb-8px {
    margin-bottom: 8px;
}

.sp-li-style-none {
    list-style: none;
}

.sp-text-center {
    text-align: center;
}

// grid .
@each $item in start, center, end {
    .sp-justify-i-#{$item} {
        justify-items: $item;
    }
}

@each $col in 1, 2, 3, 4, 5, 6 {
    .sp-grid-cols-#{$col} {
        grid-template-columns: repeat($col, 1fr);
    }
}

/* cursor */
.sp-cursor-pointer {
    cursor: pointer;
}

🔐 Sid Gifari File Manager Pro