Hello! Perhaps someone will be able to help me. I built a website based on Wordpress Sage and Tailwind CSS. There is a carousel module in the project, which looks like that: Carousel The problem is that the last photo…
import { useState } from "react" function App() { const [color, setColor] = useState("olive") return ( <div className="w-full h-screen duration-200" style={{backgroundColor: color}} ></div> ) } export default App Above code is not giving output. I tried to change the background…
I am struggling to make a basic CSS sidebar, and I can't figure out why. It seems to work on codepen examples, but I might miss something. Here I have some code in an Astro component (html with tailwindcss) <body…
I am having the following error when I use the react-email package in my next.js project the problem is caused by the Tailwind component so when I comment it out it works but since I want to apply some classes…
I know this quesion has been asked a lot of times. But they are all complex codes and the solutions differ based on their specific requirements. Please run this very simple code on Tailwind Playground: <div class="h-48 w-full bg-red-400"> <a…
When using TailwindCSS, the className field easily stretches on the right, making it hard to read and edit. Here is an example: className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" A part of this most likely won't…
I want to have control over a div when I make it absolute I tried making it left 30% right 30% then I gave top a particular pixel when it get to where I want to be it becomes squished…
I can't add style display:fixed to my header div! When I use that, my div is hidden, and I can't, it sees! My HTML codes : <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />…
How can I change the text color inside a div on hover? The text color doesn't seem to change, but everything else does Here's a look at what am talking about <div className="hover:bg-blue-100 hover:border-blue-500 hover:text-blue-600"> <p>Change textcolor inside here....</p> </div>
@media screen and (max-width: 1023px) { .nav__menu { position: fixed; top: -100%; left: 0; background-color: var(--body-color); width: 100%; box-shadow: 0 1px 16px hsla(210, 55%, 24%, .1); padding-block: 3.5rem 2rem; display: flex; flex-direction: column; align-items: right; row-gap: 2.5rem; transition: top .4s;…