JSFiddle - React, Tailwind, and code Playground

by ken3desu

HTML

<div class="col">
  <h4>少ないグラデーション指定（全体）</h4>
  <div class="box few-grad"></div>
  <h4>多いグラデーション指定（全体）</h4>
  <div class="box many-grad"></div>
  <h4>少ないグラデーション指定（左端を拡大）</h4>
  <div class="box few-grad zoom"></div>
  <h4>多いグラデーション指定（左端を拡大）</h4>
  <div class="box many-grad zoom"></div>
</div>

SCSS

.col {
    display: flex;
    flex-direction: column;
}

.box {
    width: 100%;
    height: 100px;
    margin: 1px 0;

    &.zoom {
        width: 1400%;
    }
}

.few-grad {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0% 0.75%,
        rgba(0, 0, 255, 1) 0.75% 1.51%,
        rgba(0, 0, 128, 1) 1.51% 4.51%,
        rgba(0, 255, 0, 1) 4.51% 5.51%,
    );
}

.many-grad {
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0% 0.75%,
        rgba(0, 0, 255, 1) 0.75% 1.51%,
        rgba(0, 0, 128, 1) 1.51% 4.51%,
        rgba(0, 255, 0, 1) 4.51% 65.51%,
        rgba(128, 255, 255, 1) 65.51% 66.25%,
        rgba(128, 255, 0, 1) 66.25% 72.25%,
        rgba(255, 96, 0, 1) 72.25% 73%,
        rgba(255, 0, 0, 1) 73% 96% // ここでバグ発生
    );
}