- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 Tailwind 与 React 结合使用来显示背景图像。我的配置如下:
const white_bg = require("../../assets/images/wave_light.svg"); // Import using relative path
const black_bg = require("../../assets/images/wave_black.svg"); // Import using relative path
module.exports = {
purge: [
"src/**/*.js",
"src/**/*.jsx",
"src/**/*.ts",
"src/**/*.tsx",
"public/**/*.html",
],
theme: {
extend: {
backgroundImage: (theme) => ({
"white-landing": `url(${process.env.PUBLIC_URL + white_bg})`,
"black-landing": `url(${process.env.PUBLIC_URL + black_bg})`,
}),
},
textColor: {
"nav-text": "#eaeaea",
},
fontFamily: {
header: ["Poppins", "sans-serif"],
body: ["Poppins", "sans-serif"],
},
boxShadow: {
header: "0px 0px 50px 1px rgba(0, 0, 0, 0.35)",
card: "0px 0px 25px 1px rgba(0, 0, 0, 0.25)",
},
并调用 html 中的类:
<div className="bg-white-landing white-landing box-border h-full">
我的自定义类似乎都不起作用...有什么帮助吗?
最佳答案
你查过这张票了吗?
Tailwind css backgroundImage doesn't work for me
The background image functionality of tailwindcss has been released in version 1.7.0.
可能与您正在运行的版本有关。
更新:我通过在 tailwind.css 中添加一个 url 编码的 svg 找到了解决这个问题的方法,如下所示:
// hardcoded svg background
.example-selector{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' viewBox='0 0 23 24'%3E%3Cdefs/%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='currentColor' fill-rule='nonzero' d='M22.545 21.077l-.028-.03-6.048-6.305c1.05-1.57 1.59-3.434 1.59-5.329C18.06 4.233 14 0 9.03 0 4.06 0 0 4.233 0 9.413c0 5.18 4.06 9.414 9.03 9.414 1.817 0 3.606-.592 5.11-1.658l6.049 6.305c.624.681 1.675.71 2.328.03.625-.651.653-1.747.028-2.427zM9.03 16.28c-3.635 0-6.588-3.079-6.588-6.868S5.395 2.546 9.03 2.546c3.634 0 6.587 3.078 6.587 6.867 0 3.79-2.953 6.868-6.587 6.868z'/%3E%3C/g%3E%3C/svg%3E");
}
关于reactjs - React + TailwindCSS 不显示背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64742287/
阅读目录 。 原子化 CSS 框架 tailwindcss 介绍 样式智能提示插件 小结 回到目录 原子化 CSS 框架
我正在使用 NextJS 和 Tailwind CSS 来设计顶部导航栏。我希望更改事件链接的文本颜色。下面是我的代码: const Header = () => { return(
我想让字体大小响应,但它不适用于 font-awesome。 如何让 xl:fa-3x 在 tailwindcss 上运行? 谢谢 最佳答案 这是我的解决方案,您需要使用 tailwindcss r
我正在尝试重新创建一个从 vanilla CSS 到 tailwindcss 的元素。但是我尝试了很多选择,但都失败了。 这是 CSS 代码: header { background: lin
我在成功的身份验证中加载页面时会出现一条 flash 消息,我正在尝试弄清楚如何将它水平居中放置在任何设备上。我正在使用 TailwindCSS 来调整 div 的位置并尝试过 fixed和 abso
有没有办法为高度属性设置动画,这是我的简单代码,但高度不是动画它只是立即改变 { setSecond(!secondElement) }}> TITLE 1 2 最佳
我正在尝试创建一个 Fixed Navigation Bar在 Tailwind CSS和粘性滚动主页,但无论我尝试什么,我都无法让它工作...... 这是我取得的成就: 这是我的代码:
我有一个使用 Rails 5、Ruby 2.4 构建的网络应用程序。我使用 Tailwindcss 作为我的设计框架。 我有一张主图(下图),我在其中使用类似警报的顺风作为横幅来为新的网上商店做商品广
我正在使用 TailwindCSS - 实用程序类框架 - 为我的元素设置样式。尽管这更像是一个通用的 CSS 问题。 我无法定位盒子,所以它可以在不溢出的情况下获得剩余空间。这是我的真实状态:
所以我正在使用 Rails、Vue 和 TailwindCss 1.0+ 制作应用 目前我正在尝试为我的产品制作一个下拉菜单,但是当我点击下拉按钮时,包含我的元素的下拉菜单飞到了屏幕的边缘,而它应该在
所以我想知道如何在 TailWindCSS Config 中设置最大高度媒体断点。iPad Pro 因其宽度而被识别为笔记本电脑。也就是说,它们对于 Laptop CSS 来说太高了,让我的网站看起来
在 TailwindCSS 中,您可以指定这样的代码: 因此默认颜色为红色,在“sm”断点处为绿色,在“md”断点处为蓝色。 您可以将任何实用程序类分配给任何断点,方法是在断点前加上对应的字母和“:
在前端开发的世界中,随着项目的复杂性增加,如何高效管理样式,快速开发出响应式、美观的界面成为每个开发者关心的问题。Tailwind CSS 作为一个革命性的实用类(utility-first)CSS
我将 Vue3 与 TailwindCSS 结合使用,并希望创建一个带有动态 grid-cols-{n} 类的网格。我知道 TailwindCSS 默认最多支持 12 列,但我无法自定义主题,因为列数
我想知道是否有办法在设定时间后停止 tailwindcss 中的动画 10 秒后停止弹跳 我什么都试过了,还是找不到办法 Hello 我已经尝试了 duration-75 但动画不会停止 最佳
我正在尝试将 Tailwind 与 React 结合使用来显示背景图像。我的配置如下: const white_bg = require("../../assets/images/wave_light
我有一个 website使用 TailwindCSS 正确实现深色/浅色 UI。 我想知道是否有一种方法可以强制网站以暗模式加载,直到用户通过单击切换按钮专门打开亮模式。 为什么?因为我更喜欢网站在深
这就是我的问题的样子(见环): View Image 使用Chrome的inspector发现与--tw-ring-shadow有关。所以我尝试添加像 ring-0 和 ring-offset-0 这
我们有一个使用 TailwindCSS 的组件库 (VueJS),我们将把它作为私有(private) npm 包发布。我的问题是 我们如何在组件库中公开 tailwind.config.js,以便使
我想知道如何为特定的 xl 屏幕尺寸从现有的 div 中删除背景颜色?我想要这样的东西 background-color:unset,这可以用 tailwind.css 实现吗? 最佳答案 您可以
我是一名优秀的程序员,十分优秀!