I use padding top 120px. After using padding top hover not work properly. Why is this happening?Here is my code: 'use client'; // eslint-disable-next-line no-unused-vars import React, { useState } from 'react'; // eslint-disable-next-line no-unused-vars import {BsChevronCompactLeft , BsChevronCompactRight} from…
I created a react project and ran it to test. But it looks like tailwindcss is not enabled. I'm not able to style elements. App.jsx const App = () => { return ( <div className="App"> <h1 className="text-3xl underline"> Hello world!…
I'm working on a web project, and I'm trying to create a hover effect on the first card that includes an image. When I hover over the card, I want the card to move up and the image to become…
I have a problem using TailwindCSS to align center some elements in a flex-row as soon as the text in the row item starts to get longer and wrap. Here is my current implementation: <div class="border-1 p-2 flex w-[250px] flex-col…
I'm trying to place a border top and bottom only (not right or left). From what I can see there are no conflicting css tags If I use the following it displays nothing: className="border-y-2 border-gray-3 h-24 ml-4 mb-0 w-full" If…
I am trying to use Listbox from Headless UI to create a select dropdown menu as a filtering criteria for my application (see image). The problem is that when I update my "selectedMake" state, it resets to whatever I initialize…
I have a component that can display more than 2 cards, and I want my component to display 3 cards max, and allow a scroll x if there are more than 3 cards. In my code, the 4th card always…
In tailwind why does bg-[#5ad0a1] work, however assigning the hex to variable for example const color = '#5ad0a1'; then bg-[${color}] not work? <span className={`inline-flex items-center rounded-md bg-[${color}] px-2 py-2 text-md font-base text-[${color}]`}> {params?.value} </span>
I want to make a mobile first responsive layout using flex where three sections are divided vertically in 20:50:30 ratio with full height of screen. This the HTML part: <body> <main> <div class="parent"> <div class="topSection"> This is Top Section </div>…
I used text-[20px] in <Badge/>, but it's overridden by another css class, how can I override tailwind the class <Badge label="1" className='w-[30px] h-[30px] p-6 ml-4 text-[20px]' style={{ lineHeight: '20px'}}> 1 </Badge>