Как создать полосатый фон с помощью попутного ветра?
Как вы переводите:
background: repeating-linear-gradient(
to bottom,
#039BE5 0px,
#039BE5 20px,
#90CAF9 20px,
#90CAF9 40px
);
попутному ветру?
Как сделать компонент справочного центра с помощью TailwindCSS
Справочный центр - это веб-сайт, где клиенты могут найти ответы на свои вопросы и решения своих проблем. Созданный для решения многих распространенных...
REACT и NEXT JS вместе с Tailwind CSS
Наличие собственного или персонального сайта необходимо в современном мире, а сочетание React и Next JS позволяет разработчику сделать это за меньшее...
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
1
0
411
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
У вас может быть правило в вашем CSS:
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<style type = "text/tailwindcss">
@layer utilities {
.foo {
background: repeating-linear-gradient(
to bottom,
#039BE5 0px,
#039BE5 20px,
#90CAF9 20px,
#90CAF9 40px
);
}
}
</style>
<div class = "h-80 foo"></div>Или в качестве значения backgroundImage :
tailwind.config = {
theme: {
extend: {
backgroundImage: {
foo: 'repeating-linear-gradient(to bottom, #039BE5 0px, #039BE5 20px, #90CAF9 20px, #90CAF9 40px)',
},
},
},
};<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<div class = "h-80 bg-foo"></div>Или как произвольный класс backgroundImage:
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<div class = "h-80 bg-[repeating-linear-gradient(to_bottom,#039BE5_0px,#039BE5_20px,#90CAF9_20px,#90CAF9_40px)]"></div>Или в качестве значения backgroundImage , используя остановки цвета градиента Tailwind:
tailwind.config = {
theme: {
extend: {
backgroundImage: {
foo: 'repeating-linear-gradient(to bottom,var(--tw-gradient-stops))',
},
},
},
};<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<div class = "h-80 bg-foo from-[#039BE5] from-[length:0_20px] to-[#90CAF9] to-[length:20px_40px]"></div>Или как произвольный класс backgroundImage с использованием градиентных цветовых упоров Tailwind:
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<div class = "h-80 bg-[repeating-linear-gradient(to_bottom,var(--tw-gradient-stops))] from-[#039BE5] from-[length:0_20px] to-[#90CAF9] to-[length:20px_40px]"></div>Или как собственный плагин:
tailwind.config = {
plugins: [
tailwind.plugin(({ addUtilities }) => {
addUtilities({
'.foo': {
backgroundImage: 'repeating-linear-gradient(to bottom, #039BE5 0px, #039BE5 20px, #90CAF9 20px, #90CAF9 40px)',
},
});
}),
],
}
<script src = "https://cdn.tailwindcss.com/3.4.3"></script>
<div class = "h-80 foo"></div>Другие вопросы по теме
Охват попутного ветра определенным классом/идентификатором
Переход безголового пользовательского интерфейса Tailwind по оси Y не работает
Как настроить селектор темы в Tailwind-CSS
Ввод теряет фокус, когда Popover открывается в ShadCN
Как бы мне перевести это постепенное появление анимации прокрутки в мой Tailwind.config
Разделить данные *ngFor на 2 столбца
Отключить сжатие элементов сетки
Поле ввода расширяется вне поля зрения при фокусировке с помощью CSS-перехода Tailwind
Как преобразовать условные классы из clxs в cva?
У меня возникла проблема с компонентом карусели материала-попутного ветра
Похожие вопросы
Как я могу создать div, который занимает все доступное пространство, но не переполняется?
Пользовательский шаблон сопоставления классов попутного ветра для Лептос
Цвета темы попутного ветра не работают с Daisyui
Материал Tailwind — TypeError: невозможно прочитать свойства null (чтение «useContext»)
Попутный ветер меняет цвет текста во всех элементах ввода
Tailwind CSS: как сделать так, чтобы изображение выскакивало из div
Добавьте переход к динамическому скрытому атрибуту, используя Tailwindcss и vuejs
Анимация изменения ширины элемента при условном рендеринге родственного элемента с помощью v-show
Попутный ветер «список-нет» не работает в сафари
Пользовательские фрагменты в AstroJS
Ответил как босс!!