I am using Tailwind to style my website. As soon as I add gap-x-7 or bigger, the grid becomes bigger than the parent. It works fine for gap-x-6 or smaller. How can I fix this? Shouldn't the col-span-6 always calculate…
The Background color of the selected list item isn't changing, only the text color is changing to white. import { NavLink } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { MyContext } from "./links/MyContext.jsx"; import { useContext }…
I am trying to navigate different cards to their respective pages using react-router and use-Navigate but can't ,as the onclick functionality is not working. import React from 'react'; import { Link , useNavigate} from 'react-router-dom'; const Card = ({ id,…
How can we create a triangle at the bottom right corner of the parent div. I have tried something using tailwind css, but it is extending the sides of triangle to the outside of the parent div, how can not…
I want to install both tailwind + react with one command. Creating empty template files (copy pasting an empty tailwind installed project) makes my file system weird. I searched for it and actually find nothing helpful. There is a create-vite-tailwind…
enter image description here export default function Home() { return ( <> <h1 className="text-2xl text-green-500">Netflix Clone</h1> </> ); This is my tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./app/**/*.{js,ts,jsx,tsx}"], content: ["./pages/**/*.{js,ts,jsx,tsx}"], content: ["./components/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, },…
I am trying to convert the below code to cva.. {items.map((item, index) => { const isActive = item.key === SOMETHING; return ( <div key={index} className={clsx( `cursor-pointer`, { "text-white": isActive && variant === "inverted", "text-stone-950": isActive && variant === "default", "text-[#9b9b9b]":…
How can I make the <h1> elements take on the next line if the width of the parent element becomes too small? EXAMPLE: Each word here is an <h1>element. They are spaced by their parent <div> using display: flex; and…
Warning: React does not recognize the dataSlot prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase dataslot instead. If you accidentally passed it from a parent…
I have 3 images which should appear in a row side by side. Howevver the first image is big and it pushes the other two images to next row which I don't want. I have made a class and added…