This is the code: <div class="grid w-full gap-4 grid-cols-8"> <div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" class="tabler-icon tabler-icon-file-filled h-10 w-10"> <path d="M12 2l.117 .007a1 1 0 0 1 .876…
Im just experimenting with Tailwind, i want to make a component that receives a colorname and then displays all the values of that color. const Square = ({ clr }: { clr: string }) => { return <div className={twMerge("w-[50px] h-[75px]",…
I'm trying to apply custom animations to my elements using Tailwind CSS. I have successfully used Tailwind's built-in utility classes for simple animations, but now I want to create a more complex animation sequence that isn't covered by the default…
How to remove next and Previous buttons from pagination of flowbite library? I write this code but the buttons doesn't remove. My goal is to reach this figure: import { Pagination } from "flowbite-react"; <Pagination className="mx-auto" currentPage={1} totalPages={3} showPrevious={false} showNext={false}…
What would be the best way to handle an element which needs to stay in a specific place if the screen width is > X and stay in another place if screen width < X? Example: https://jsfiddle.net/ovujgsz0/7/ I want the…
I am creating a project component for my homepage which displays a project. When the user clicks on the component, I want the overall component to redirect to the specific project page. However, when they specifically click the GitHub icon,…
I am using NextJS with Shadcn. I am trying to display a command component that contains a dynamic number of items from a database. This is a snippet of the line that is not working. Hard coding numbers works fine,…
I am using Next JS 14 and Tailwind CSS If I use fill this is code: "use client"; import React from "react"; import { motion } from "framer-motion"; import Image from "next/image"; const Photo = () => { return (…
I need to use tailwind semantic css classes of tailwind.config file in SVG image inside lineargradient stop-color properties. My react app has designer css file where hex color codes are used as var css class e.g: --colors-accent-400: #29b6f6; Then above…
I am getting this type of padding /border . Click the link below to view. [Inconsistent padding in tailwind] Want like this (https://i.sstatic.net/2RsqliM6.png) I was trying to get border with gradient from top to bottom of purple-900 to purple-600. But…