I want to style an <a> tag inside a using Tailwind CSS. I want to add the style via the parent <ul> tag. I tried [&>li>a], but it doesn't work as expected. Here is my HTML structure: <ul class="flex items-center…
I am building UI-kit with react tailwind. I know that tailwind can't find classes that made with template strings. I want to achieve this: I have a few components in my ui kit and I want them to have same…
I have Figma design for mobile application and for desktop application for my web page. I don't know how to apply both mobile and desktop versions on my code so when I open the app in my phone only the…
I'm creating a web page about a weather app, but I have a problem with the background-color of the body. I gave the bodysuit the background color #191a38. Inside the body I have a main with the information of the…
I have installed tailwind successfully. When it comes to using the @apply, things are not working. <body> <!-- header --> <header class="bg-transparent absolute top-0 left-0 w-full flex items-center z-10"> <div class="container"> <div class="flex items-center justify-between relative"> <div class="px-4"> <a href="#home"…
I have a webpage with a table in which the last column is a button that opens a dropdown menu (for simplicity, the example does not include JS): <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <style> .butonMenu {…
I'm trying to style a button with tailwind on Next.js. I want the button background color to change on hover. I'm trying to style a button doing something like this <button className="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:bg-slate-200"> Hire Me </button>…
I'm working on a header section in HTML and decided to learn JavaScript in this project. I'm also using TailwindCSS, with a few specifics I included in a different .css file. I got the JS code from w3schools and adapted…
There is a feature i implemented in the tiktaktoe wherein if a player wins the game, then the winning box gets green in color and if there is a draw , then all the box becomes red. The feature is…
https://play.tailwindcss.com/XiH6j3pUry (see live code) <main class="flex flex-col"> <div class="grid h-full w-full items-center justify-center gap-8 bg-red-500 grid-cols-2 p-5"> <div class="flex h-full w-full flex-col items-center justify-center gap-6 bg-blue-500"></div> </div> </main> In this minimum example, there exists a main container that is flexed…