menu

Questions & Answers

React, Tailwind and Application of Viewport-Specific Classes

I am trying to apply an onhover effect for a viewport larger than 768px. Below 768px it should look like the elements are "always onhover". Specifically, on desktop or larger devices in general, there should be a background in a box at onhover. This background should always be shown on mobile, i.e. <768px in my case.

What am I doing wrong? Here are the snippets.

JSX-Snippet:

import { features } from "../constants"; import styles from "../style";

const FeatureCard = ({ icon, title, content, index }) => (   
<div className=
 {` 
   flex flex-row p-6 rounded-[20px] 
   ss:max-sm:feature-card-small  
   sm:feature-card
   ${index !== features.length - 1 ? "mb-6" : "mb-0"} 
 `}
>
<div className={`
    w-[64px] 
    h-[64px] 
    rounded-full 
    ${styles.flexCenter} 
    bg-dimBlue`
}>
    <img 
        src={icon} 
        alt="star" 
        className="
            w-[50%]
            h-[50%] 
            object-contain"
    />
</div>
    <div className="flex-1 flex flex-col ml-3">
       <h4 className="
           font-poppins
           font-semibold 
           text-white 
           text-[18px] 
           leading-[23.4px] 
           mb-1">
        {title}
       </h4>
      <p className="
          font-poppins 
          font-normal 
          text-dimWhite 
          text-[16px] 
          leading-[24px]
      ">
        {content}
      </p>
    );

    export default FeatureCard;

CSS-Snippet:

.feature-card:hover { background: var(--black-gradient); box-shadow: var(--card-shadow); }

.feature-card-small { background: var(--black-gradient); box-shadow: var(--card-shadow); }
  • simply apply feature-card as class without viewport specification works as expected; onhover --> background changes
  • different viewport-specifications (sm:..., ss:max-sm and sm:) and creation of different CSS classes (so there can be no overlap for sure) did not work

sorry if the code block looks like a mess here on stackoverflow. my first post, still learning.

Comments:
2023-01-07 20:38:06
figured out that this seems to be some general problem I am having. If I change some lines within existing css or apply existing css classes, it works. If I create a new class, it cannot be effectively applied. I looked for some imports or exports I am missing but didn't find any. However, I do not understand how it currently works tbh. I have a index.css in src but it is never referenced or I just don't find it. I am fairly new so I guess maybe someone with experience can explain me the magic of a index.css or how I can search for references in VS Code.
2023-01-07 20:38:06
used find all references in VS Code. index.css is never referenced.
Answers(0) :