Background image with CRA

[natsathorn]

I'm trying to migrate from NEXT.JS to CRA.

Everything seems to work fine excepted that I cannot use the backgroundImage in tailwind.config.js`, since CRA allowed you to import image directly into the code like JS module.

I also tried to import it with fullpath, it is also doesn't work.

backgroundImage: () => {
        return {
          main: `url('./src/bg.jpg')`,
        };
      },

I think the real issue is I didn't really integrate tailwind into the build of CRA.
Basically this is how I run my application.

   "build:tailwind": "tailwindcss build src/styles/tailwind.css -o src/styles/tailwind.output.css",
    "prestart": "npm run build:tailwind",
    "start": "react-scripts start",

Right now, I have to do work around by create another css file and manually write down all the background Image thingy.

i.e.

.bg {
   background-image: url('./bg.jpg');
}

With this, I can still use other tailwind BG classes.

Is there a better way to setup tailwind with CRA, so that BG image could work fine?

[simonswiss]

Hey @natsathorn!

I have actually been working on Tailwind CSS integration guides that we'll release in a couple of weeks - one of them being with CRA 👍

To have a more integrated setup, you can use something called CRACO (which stands for Create React App Config O`verride (or something like that 😅.

Here's the setup below. Hope it helps! 👍

Not sure if it will sort out your image problem, but it will improve the "integration" of Tailwind as part of the CRA build.

---

Using Tailwind CSS with Create React App

Creating your project

Start by creating a new Create React App project if you don't have one set up already:

npx create-react-app my-project

Setting up Tailwind CSS

Install Tailwind, Autoprefixer and CRACO using npm or yarn:

npm install tailwindcss autoprefixer@^9 @craco/craco

⚠️ Note that at the time of writing this guide, we need to stick to version 9 of Autoprefixer. This will go away when NextJS internally upgrades to PostCSS 8, at what point we'll update this guide! 😅

Next, let's generate default tailwind.config.js:

npx tailwindcss init

Then, let's create a craco.config.js at the root of our project, with the following settings:

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};

Now, let's replace the content of src/index.css with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

That's it! Tailwind CSS is now available throughout our entire application 🎉

[natsathorn]

@simonswiss Thanks for the reply. This is really really useful, I now have better integration with tailwind.

However, the compiler still cannot resolve the path I provided in tailwind config.
So, the background image is still not working.

[simonswiss]

Hey,

If you're trying to reference an image from your CSS in Create React App, it's going to try and reference it from the compiled CSS file.

Instead of having it in your src directory, I think you need to put that image in your public folder: https://create-react-app.dev/docs/using-the-public-folder/.

Have a try and see how you go! 🤞

[sven09]

This works for us:

<div className={`...`}
	style={{
	    backgroundImage: `url(${assets?.backgroundImage?.url})`,
        }}>