TailwindCSS — 1 Градиент на нескольких элементах

Я написал элемент div с кнопками внутри. Я хочу обрезать фон с элементами кнопок, чтобы фон кнопок был цветным, а цвет фона элемента вне кнопок — черным. (Спасибо @NINE за картинку) Однако я не могу найти способ в документации CSS Tailwind (я использую NextJS).

return (
  <div className = "flex mt-10 flex-col items-center">
    <div className = "relative">
      <div className = "bg-gradient-to-br from-[#70d6ff] via-[#ff70a6] to-[#e9ff70]">
        <div className = "p-4 font-semibold grid grid-cols-3 items-center">
          <button className = "bg-transparent bg-clip-padding border rounded p-2" onClick = {() => {setView(10);}}><span>Kelas 10</span></button>
          <button className = "bg-transparent bg-clip-padding border rounded p-2 ml-2" onClick = {() => {setView(11);}}>Kelas 11</button>
          <button className = "bg-transparent bg-clip-padding border rounded p-2 ml-2" onClick = {() => {setView(12);}}>Kelas 12</button>
          <div className = "grid grid-cols-2 col-span-3 space-x-2 mt-2">
            <button className = "bg-transparent bg-clip-padding border rounded p-2" onClick = {() => {setDateYesterday();}}>Kemarin</button>
            <button className = "bg-transparent bg-clip-padding border rounded p-2" onClick = {() => {setDateTommorow();}}>Besok</button>
          </div>
          <button className = "bg-transparent bg-clip-padding border rounded p-2 col-span-3 mt-2" onClick = {handleCopy}>{copyMessage}</button>
        </div>
      </div>
    </div>
    <Display/>
  </div>
)

Есть ли способ или это невозможно в настоящее время с помощью Tailwind CSS?

Что я пробовал: использовать каждый bg-clip- в CSS Tailwind. Чего я ожидаю: фон элемента кнопки останется, а элементы/пространства за пределами элемента кнопки станут черными.

Редактировать: Итак, я бы хотел bg-clip-text, но перевернул его, чтобы текст все еще был белым, а фон был цветным, а не текстом.

В чистом CSS вы можете сделать это, задав каждому элементу псевдоэлемент перед, который является абсолютным, а родительский элемент элементов позиционируется относительно. Элемент before имеет ширину и высоту 100%, а фон, верх и лево — 0.

— 18.08.2024 12:12

@AHaworth, можешь объяснить подробнее? Думаю, я смогу реализовать это в Tailwind

— 18.08.2024 12:39

css next.js tailwind-css

18.08.2024 10:56

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я отредактировал ответ, который разместил для редактирования.

Трудно найти clip-path среди классов с попутным ветром

Я тестировал это один раз с помощью чистого CSS.

Это не идеальный ответ, но я надеюсь, что вы близки к решению проблемы...!

глобальный.css

...
/* bg-gradient-to-br from-[#70d6ff] via-[#ff70a6] to-[#e9ff70] */
button.custom-clip {
  clip-path: xywh(0 0 100% 100% round 0.25rem);
  background: white;
}

button.custom-clip:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom right, #70d6ff, #ff70a6, #e9ff70);
  border: 1px solid white;
}

jadwalRewrite.tsx

...
    return (
        <div className = "flex mt-10 flex-col items-center">
            <div className = "relative">
            <div className = "">
                <div className = "p-4 font-semibold grid grid-cols-3 items-center">
                    <button className = "custom-clip rounded border-none" onClick = {() => {setView(10);}}>
                        <span className = "block w-full h-full border p-2 rounded">Kelas 10</span>
                    </button>
                    <button className = "custom-clip rounded ml-2 border-none" onClick = {() => {setView(11);}}>
                        <span className = "block w-full h-full border p-2 rounded">Kelas 11</span>
                    </button>
                    <button className = "custom-clip rounded ml-2 border-none" onClick = {() => {setView(12);}}>
                        <span className = "block w-full h-full border p-2 rounded">Kelas 12</span>
                    </button>
                    <div className = "grid grid-cols-2 col-span-3 space-x-2 mt-2">
                        <button className = "custom-clip rounded border-none" onClick = {() => {setDateYesterday();}}>
                            <span className = "block w-full h-full border p-2 rounded">Kemarin</span>
                        </button>
                        <button className = "custom-clip rounded border-none" onClick = {() => {setDateTommorow();}}>
                            <span className = "block w-full h-full border p-2 rounded">Besok</span>
                        </button>
                    </div>
                    <button className = "custom-clip rounded col-span-3 mt-2 border-none" onClick = {handleCopy}>
                        <span className = "block w-full h-full border p-2 rounded">{copyMessage}</span>
                    </button>
                </div>
            </div>
            </div>
            <Display/>
        </div>
    )