CODEWITHSUNDEEP
reactjstailwind-cssstyled-components
John
John

Reputation: 1665

Tailwind CSS, React and Styled Components setup to load images on different break points

I am learning Tailwind with Styled Components using twin macros. I have a very simple component with an image and description.

I want to have two breakpoints at which the image will change. At the moment I am having issues with loading any image from tailwind.config.js.

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      backgroundImage: {
        "product-desktop": "url('../public/images/image-product-desktop.jpg')",
        "product-mobile": "url('../public/images/image-product-mobile.jpg')",
      },
    },
    screens: {
      md: "375px",
      // => @media (min-width: 640px) { ... }
      xl: "800px",
      // => @media (min-width: 1280px) { ... }
    },
    fontFamily: {
      montserrat: ["font-family", "Montserrat", "sans-serif"],
      fraunces: ["font-family", "Fraunces", "sans-serif"],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

ProductCard.js

import React from "react";
import {
  CardContainer,
  CardDescriptionProduct,
  CardDescriptionContainer,
  CardDescriptionTile,
  CardDescription,
  CardDescriptionButton,
  CardDescriptionPrice,
  CardDescriptionStrikethrough,
  CardImage,
} from "./styles/Card.styled";
import { ReactComponent as ShoppingCartIcon } from "../assets/images/icon-cart.svg";

export const ProductCard = () => {
  return (
    <CardContainer>
      <CardImage></CardImage>
      <CardDescriptionContainer>
        <CardDescriptionProduct>Perfume</CardDescriptionProduct>
        <CardDescriptionTile>
          Gabrielle Essence Eau De Parfum
        </CardDescriptionTile>
        <CardDescription>
          A floral, solar and voluptuous interception composed by Oliver Polge,
          Perfumer-Creator for the House of CHANEL.
        </CardDescription>
        <div className="flex">
          <CardDescriptionPrice>$149.99</CardDescriptionPrice>
          <CardDescriptionStrikethrough>$169.99</CardDescriptionStrikethrough>
        </div>
        <CardDescriptionButton>
          <ShoppingCartIcon />
          Add to Cart
        </CardDescriptionButton>
      </CardDescriptionContainer>
    </CardContainer>
  );
};

Card.styled.js:

[![export const CardContainer = styled.div`
  ${tw`
    flex
    flex-col
    justify-center
    items-center
    h-full
  `}

  @media (min-width: 800px) {
    flex-grow: 1;
    flex-direction: row;
    height: 100vh;
    padding: 200px 30px;
  }
`;

export const CardImage = styled.div`
  ${tw`
    md:bg-product-mobile xl:bg-product-desktop
    w-10/12
    overflow-hidden
    mt-20
    rounded-t-lg
  `}
  @media (min-width: 800px) {
    display: flex;
    flex-grow: 2;
    margin-top: 0px;
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0rem;

    min-height: 50vh;
  }
`;

export const CardDescriptionContainer = styled.div`
  ${tw`
    w-10/12
    bg-white
    rounded-b-lg
    p-5
  `}

  @media (min-width: 800px) {
    margin-top: 0px;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0rem;
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0rem;
    display: flex;
    flex-direction: column;
    min-height: 50vh;
  }
`;][1]][1]

In the above code, I know that @media is wrong, but could not find how to accomplish this the Tailwind way. It's just to show what I am trying to do.

IN this image i can see that the correct images are being loaded per break point but the just do not appear.

enter image description here

UPDATE:

Looks like the path for the image set in tailwind.congig.js is wrong but i makes no sense to me unless i don't understand something url(images/image-product-desktop.jpg) but if the tailwinf.config.js is in the root of the directory, and the images are is src/assets/images how could that be the right path. Also when i add the this path in config images/image-product-desktop.jpg tailwind will throw an error Can't resolve the path.

enter image description here

Upvotes: 2

Views: 769

Answers (1)

Ed Lucas
Ed Lucas

Reputation: 7355

In Tailwind, you need to specify the breakpoint as a prefix. In this case you should leave your mobile image as the default and add the xl prefix to any class you want applied when the width >= 1440px.

export const CardImage = styled.img`
  ${tw`
    bg-image-product-mobile xl:bg-image-product-desktop
  `}
`;

Since your background image appears to be added to the DOM, you might ensure that the path, /src/images/image-product-desktop.jpg, is pointing to the file correctly.

The image paths in your config should be relative to the static assets folder that your webserver uses, not relative to the tailwind.config.js file. Your server should find the desktop image if it's defined in your config as /images/image-product-desktop.jpg and the image file is placed in /public/images

Upvotes: 2

Related Questions