How To Set Unique Background Images React Component

Tailwind CSS is a nice and powerfull utility-first framework that allows crafting websites/apps chop-chop. In this guide, we'll exist learning how to use a custom background image with nighttime way back up in Tailwind CSS.

Let'due south get started!

Setting up a Side by side.js and Tailwind CSS app
Configuring Tailwind CSS
Creating the Post Component
Displaying the Mail service Component

Setting upwardly a Next.js and Tailwind CSS app

In this article, I'll use Next.js to start a new app; feel complimentary to use the framework of your choice, just proceed in mind what y'all'll learn here volition utilise anyway.

Begin past opening your command-line interface (CLI) and running this command:

                          npx create-next-app next-tailwindcss-app

A fresh Adjacent.js app should be created after so. At present, scan to the root of the projection and install Tailwind CSS and co (its dependencies).

                          yarn              add              -D tailwindcss postcss autoprefixer              # npm install -D tailwindcss postcss autoprefixer

Adjacent, create your configuration files for Tailwind and PostCSS. For that, you need to execute the following control in your CLI:

This will create two config files: i for Tailwind CSS and another for PostCSS. The purpose of these configurations is to extend the ability of Tailwind to friction match our need.

                          // tailwind.config.js              module.exports              =              {              purge:              [              ]              ,              darkMode:              imitation              ,              // or 'media' or 'class'              theme:              {              extend:              {              }              ,              }              ,              variants:              {              extend:              {              }              ,              }              ,              plugins:              [              ]              ,              }

                          // postcss.config.js              module.exports              =              {              plugins:              {              tailwindcss:              {              }              ,              autoprefixer:              {              }              ,              }              ,              }

We've now completed the initial setup. Withal, nosotros didn't tell however Next.js that we'll be using Tailwind CSS to style our app. To do so, we have to import Tailwind in our _app.js file.

                                          // pages/_app.js                                            import                "tailwindcss/tailwind.css"                            role              MyApp              (                              {                Component,                pageProps                }                            )              {              render              <Component              {              ...pageProps}              /              >              }              export              default              MyApp

With that footstep, nosotros can now apply Tailwind to mode our app.

Equally you tin can meet, we've gone through several configurations to become our Next.js and Tailwind app up and running. But, luckily in that location is a quicker style to get all of this with merely 1 command.

Mind blowing :)

                          npm              create side by side-app --instance with-tailwindcss next-tailwindcss-app

This command volition use the official Next.js examples to create a new app with Tailwind CSS fix to use.

With that in place, we can now update the Tailwind config file to enable nighttime mode and add our custom images every bit well.

Configuring Tailwind CSS

Tailwind CSS makes everything easier. All we have to do to enable dark manner is to add form (or media) every bit value to the darkMode belongings.

                          // tailwind.config.js              module.exports              =              {              purge:              [              ]              ,                              darkMode:                "form"                ,                            theme:              {                              extend:                {                                            backgroundImage:                {                                            "nature-light"                :                "url('/nature-low-cal.jpg')"                ,                                            "nature-dark"                :                "url('/nature-dark.jpg')"                ,                            }              ,              }              ,              }              ,              variants:              {                              extend:                {                            backgroundImage:              [              "night"              ]              ,              }              ,              }              ,              plugins:              [              ]              ,              }

As for the background images, we inform Tailwind to use nature-light in light theme and switch to nature-dark in nighttime mode.

By default, simply responsive variants are generated for background image utilities. We need to add dark to the backgroundImage variant to back up dark mode.

Oops! I near forget to mention that we need to add together the images into the public folder in order to utilise the assets (as you might estimate) in our app.

You lot tin can download the images here:

Image 1 past Yura Tsipak
Epitome 2 by Annie Spratt

Let's move on and create our components in the next section.

Creating the `Mail service` Component

                          // components/Post.js              import              {              useState              }              from              "react"              const              LIGHT_THEME              =              "calorie-free"              const              DARK_THEME              =              "dark"              export              default              office              Mail              (              )              {              const              [theme,              setTheme]              =              useState              (              LIGHT_THEME              )              const              switchTheme              =              (              )              =>              {              if              (              !document.documentElement.classList.              contains              (              DARK_THEME              )              )              {              document.documentElement.classList.              add              (              DARK_THEME              )              setTheme              (              DARK_THEME              )              }              else              {              document.documentElement.classList.              remove              (              DARK_THEME              )              setTheme              (              LIGHT_THEME              )              }              }              return              (              <div className=              "bg-white dark:bg-greyness-800 w-96 lead-4 rounded-3xl shadow-lg overflow-hidden"              >              <div className=              "bg-nature-low-cal night:bg-nature-dark bg-cover object-cover bg-center h-56 w-full"              /              >              <div className=              "p-4 text-left"              >              <h3 className=              "text-xl text-blackness dark:text-white font-semibold"              >              My First Post              <              /h3>              <p className=              "mt-two mb-x text-grayness-600 dark:text-gray-300"              >              Lorem ipsum dolor sit down amet,              consectetur adipiscing elit,              sed              practise              eiusmod tempor incididunt ut labore et dolore magna aliqua...              <              /p>              <button           onClick=              {switchTheme}              className=              "float-right px-vi py-2.v bg-greyness-800 dark:bg-white text-gray-200 nighttime:text-gray-800 rounded-total capitalize"              >              {theme}              Mode              <              /push>              <              /div>              <              /div>              )              }

Hither, nosotros have a unproblematic React component with two main things to underline:

The function switchTheme allows us to change the theme. Annotation that here, cypher is persisted to the local storage or context API because it'due south not the purpose of this tutorial; feel free to push button things to the next level and add those features.
The dark prefix is used by Tailwind to switch betwixt light and night theme. All classes prefixed past dark: volition be used merely in dark mode. The background prototype for light theme will be bg-nature-light and the i for dark mode will be bg-nature-night.

Sounds magical? Well, information technology is, because Tailwind handles almost everything for u.s..

With this in place, we tin progress to the last step and import this component into the alphabetize.js file.

Displaying the `Postal service` Component

                          // pages/index.js              import              Post              from              "../components/Mail service"              export              default              function              Home              (              )              {              render              (              <principal className=              "flex flex-col items-center justify-middle westward-full min-h-screen py-ii flex-1 px-20 text-center bg-gray-100"              >              <Post              /              >              <              /master>              )              }

We're at present set up to test our Side by side.js app in the browser.

To do so, execute the following in the projection root:

hopefully it works :)

Let'due south visit the browser http://localhost:3000

application

And that's it! Our app is looking tight!

You can find the finished project on this Github repo.

Thank you for reading!