时间戳

首页 > 解决方案 > React + TailwindCSS 不显示背景图片

reactjs - React + TailwindCSS 不显示背景图片

问题描述

我试图将 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">

我的自定义课程似乎都不起作用......有什么帮助吗？

标签： reactjstailwind-css

解决方案

你检查过这张票吗？

Tailwind css backgroundImage 对我不起作用

tailwindcss 的背景图片功能已在 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");
  }

推荐阅读