Style with TailwindCSS

[JonathanFager]

Describe the feature

I would like a way to apply styles through the TailwindsCSS utility classes

Describe the solution you'd like

for example

[JonathanFager]

Any thoughts on this?

[areindl]

@JonathanFager

As a Workround I copied the theme to a custom scss file and used @apply to overwrite the colors with Tailwind-Colors:

/* import theme style */
// @import '~vue-slider-component/lib/theme/default.scss';

/* component style */
.vue-slider-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* rail style */
.vue-slider-rail {
    background-color: #ccc;
    border-radius: 15px;
}

/* process style */
.vue-slider-process {
    @apply bg-indigo-400;
    border-radius: 15px;
}

/* mark style */
.vue-slider-mark {
    z-index: 4;
}
.vue-slider-mark:first-child .vue-slider-mark-step,
.vue-slider-mark:last-child .vue-slider-mark-step {
    display: none;
}
.vue-slider-mark-step {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.16);
}
.vue-slider-mark-label {
    font-size: 14px;
    white-space: nowrap;
}
/* dot style */
.vue-slider-dot-handle {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
}
.vue-slider-dot-handle-focus {
    box-shadow: 0px 0px 1px 2px rgba(97, 224, 200, 0.36);
}

.vue-slider-dot-handle-disabled {
    cursor: not-allowed;
    background-color: #ccc;
}

.vue-slider-dot-tooltip-inner {
    font-size: 14px;
    white-space: nowrap;
    padding: 2px 5px;
    min-width: 20px;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    box-sizing: content-box;
    @apply border-indigo-600 bg-indigo-600;
}
.vue-slider-dot-tooltip-inner::after {
    content: '';
    position: absolute;
}
.vue-slider-dot-tooltip-inner-top::after {
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-top-color: inherit;
}
.vue-slider-dot-tooltip-inner-bottom::after {
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-bottom-color: inherit;
}
.vue-slider-dot-tooltip-inner-left::after {
    left: 100%;
    top: 50%;
    transform: translate(0, -50%);
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-left-color: inherit;
}
.vue-slider-dot-tooltip-inner-right::after {
    right: 100%;
    top: 50%;
    transform: translate(0, -50%);
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px;
    border-right-color: inherit;
}

.vue-slider-dot-tooltip-wrapper {
    opacity: 0;
    transition: all 0.3s;
}
.vue-slider-dot-tooltip-wrapper-show {
    opacity: 1;
}

/*# sourceMappingURL=default.css.map */

Of course you can overwrite more attributes in the CSS with @apply

[kalnode]

I desire this as well. I use Tailwind exclusively across all my projects; I know many devs who do the same.

Ultimately, I'm looking for this simplicity:

1. Not having to import any vue-slider CSS extras; will use vue-slider defaults as a starting point.

2. Declare some custom class on the top level of the slider <vue-slider-component ... ... class="myCustomSlider3" />

3. In styles (anywhere, but probably in the same abstraction component), customize specific things using TW's @apply:

<style>
    .myCustomSlider3 .vue-slider-dot-handle {
        @apply bg-gray-800 shadow-none;
    }

    .myCustomSlider3 .vue-slider-process {
        @apply bg-gray-800 rounded-3xl;
    }
</style>

In early tests, the above seems to partially work already. However some elements don't seem to be customizeable in this fashion. For instance when it comes to dot (marker) size, this seems to be calculated dynamically (why?) and overrides whatever customization I give it. Who knows what other elements have the same dilemma.