如何在 CRA 应用程序中将背景图像类添加到顺风配置

【问题标题】：How to add background image class to tailwind config in CRA application如何在 CRA 应用程序中将背景图像类添加到顺风配置
【发布时间】：2022-01-06 14:00:55
【问题描述】：

我正在尝试在 Create react 应用程序中使用 tailwind css 将图像用作背景。但是不知道怎么添加背景图片类。

错误：

Module not found: Error: Can't resolve './src/images/pages/login.svg' in 'C:<some_project>\src'

我尝试了什么：

backgroundImage: {
      "login-image": "url('./src/images/pages/login.svg')",
},
// assumed it starts from src
backgroundImage: {
      "login-image": "url('/images/pages/login.svg')",
},
// also tried to place it into public page and include like
backgroundImage: {
      "login-image": "url('/images/pages/login.svg')",
},

任何帮助将不胜感激！谢谢

【问题讨论】：

标签： create-react-app tailwind-css cra

【解决方案1】：

这就是我的工作方式：

在tailwind.config.js 中，我添加了我的背景以进行扩展（确保放置适当的图片网址）：

extend: {
  backgroundImage: {
    awlogo: "url('./images/aw-lg-logo.png')",
    awOpac: "url('./images/awopac.png')"
  },
},

这是我的 App.js 示例：

import "./index.css";

function App() {
  return (
    <div className="grid place-items-center h-screen bg-blue">
      <img
        className="bg-no-repeat w-screen h-screen opacity-5 fixed overflow-hidden z-1 bg-cover bg-awOpac  "
        alt="aw logo opacity"
      />
    </div>
  );
}

上面写着bg-awOpac，基本上是这样写的：

.bg-awOpac {
    background-image: url('./images/awopac.png');
}

确保您也为图像指定了高度和宽度。

我正在使用"tailwindcss": "^3.0.23"

【讨论】：