[image-background problem]

[GabrielFMPinheiro]

import React, { Component } from 'react'
import tw, { styled } from 'twin.macro'

import Header from './components/Header'

const Wrapper = styled.div`
  ${
    tw`
      min-h-screen
      bg-pattern-bg
    `
  }
`

export default class App extends Component {
  render() {
    return (
      <Wrapper>
        oi
        <div className="bg-pattern-bg">
          hi
        </div>
        <Header />
      </Wrapper>
    )
  }
}

Hello,

I am learning how to use twin.macro and I ran into a problem that I am not able to solve.

In the file tailwind.config.js, I created a background image called pattern-bg, but when I try to insert the background in "tw", the image doesn't appear on the screen. Now if I insert directly into the element just like it is in the code <div className = "bg-pattern-bg" ... the image works normally. If I try to use bg-[url('/src/images/pattern-bg.png')] in "tw" which is the image path, the following error appears:

Compiled with problems:

ERROR in ./src/App.js

The module build failed (from ./node_modules/babel-loader/lib/index.js):
MacroError: /home/gabriel/Personal-Projects/Frontend Mentor/ip-address-tracker-master/ip-adress-tracker/src/App.js: 

[38;2;255;131;131m✕ Bad: The arbitrary value in "bg-[url('/src/images/pattern-bg.png')]" is not valid
✓ Good: Replace "url('/src/images/pattern-bg.png')" with a valid value based on color

    a throwIf (/home/gabriel/Personal-Projects/Frontend Mentor/ip-address-tracker-master/ip-adress-tracker/node_modules/twin.macro/macro.js:22:9)
    in handleArbitraryCss (/home/gabriel/Personal-Projects/Frontend Mentor/ip-address-tracker-master/ip-adress-tracker/node_modules/twin.macro/macro.js:7593:5)
    in Object.arbitraryCss (/home/gabriel/Personal-Projects/Frontend Mentor/ip-address-tracker-master/ip-adress-tracker/node_modules/twin.macro/macro.js:7788:42)
    in /home/gabriel/Personal-Projects/Frontend Mentor/ip-address-tracker-master/ip-adress-tracker/node_modules/twin.macro/macro.js:7816:32
    at Array.reduce (<anonymous>)
    at getStyleData (/home/gabriel/Personal-Projects/Frontend Mentor/ip-address-tracker-master/ip-adress-tracker/node_modules/twin.macro/macro.js:7715:24)
    in /home/gabriel/Personal-Projects/Frontend Mentor/ip-address-tracker-master/ip-adress-tracker/node_modules/twin.macro/macro.js:8002:15
    on Array.forEach (<anonymous>)
    in handleTwFunction (/home/gabriel/Personal-Projects/Frontend Mentor/ip-address-tracker-master/ip-adress-tracker/node_modules/twin.macro/macro.js:7963:27)
    in twinMacro (/home/gabriel/Personal-Projects/Frontend Mentor/ip-address-tracker-master/ip-adress-tracker/node_modules/twin.macro/macro.js:8486:5)

[ben-rogerson]

Hey there

Try one of these options:

import tw from "twin.macro";

// Arbitrary value with lookup (tailwind feature)
tw`bg-[lookup:url('/src/images/pattern-bg.png')]`.backgroundImage

// Short css (twin feature)
tw`background-image[url('/src/images/pattern-bg.png')]`

[GabrielFMPinheiro]

For my case it didn't work yet, but I did a test with an external link and it worked.The background is coming up blank, although the link appears in the DOM. The problem is something with the path now. As a solution for now, I did like this:

  background-image: url(${BgImg}); // BgImg = image path
  background-size: cover
  background-position: center;

[ben-rogerson]

if the path needs to be calculated via a function, then you won't be able to use twin for it.
You'd want to try something like this instead:

import React, { Component } from 'react'
import tw, { styled } from 'twin.macro'

const getImagePath = path => { ... } // < Resolve path here

const Wrapper = styled.div({ bgImage }) => [
    tw`min-h-screen bg-pattern-bg`,
    { backgroundImage: getImagePath(bgImage) }
])

;<Wrapper bgImage="/src/images/pattern-bg.png">oi</Wrapper>

[GabrielFMPinheiro]

I got it, thanks!