I have this rather simple piece of html + tailwind CSS that keeps breaking in my React app. In Tailwind Play it looks exactly like I want it to (simplified here but it still has the behavior I want with…
I'm trying to make the navbar and footer 1/5 of the height of a wrapper div who should take the height of the whole screen but no matter what h-* class I use it doesn't take effect: import { useEffect…
I am working with flex in Tailwind CSS and I have content that's not being aligned correctly. <div class="flex flex-col space-y-4 p-2 w-full"> <div class="flex space-x-2"> <p class="w-1/4 text-sm"> python </p> <div class="h-4 w-1/2 rounded-md mt-1 bg-green-400" style="width: 65%;"></div> <p…
I am trying to use scss but tailwind is not compiling as expected. Thats how i build application.css "build:css": "tailwindcss -i ./app/assets/stylesheets/application.scss -o ./app/assets/builds/application.css" Here is my application.scss; @import 'application_dock/colors.scss'; @import 'application_dock/pages/spots.scss'; @tailwind base; @tailwind components; @tailwind utilities; body {…
I have a working Laravel project with Tailwind CSS I have also used Flowbite Datepicker using CDN to include the datepicker JavaScript. The project is working fine and the date-picker is showing nicely. But when I run the npm run…
Sorry this is my first time trying to create my own website and I'm trying to learn it on my own, so my questions might be a bit dumb. I'm currently creating a website to host all of my certifications…
I am making a web application using Next.JS and Tailwind for styling. I would like to map over some "accords" for a perfume giving them each variable widths by reading the size property of each accord which is a string.…
I'm trying to make horizontally scrollable card in mobile version of my project using Tailwind CSS. How to move the card title to next line when the max width of it's parent component is reached. Here's my code: <section id="pendidikan"…
I read the documentation but I don't find anything about the :selected state in Tailwind CSS. Is there a way to achieve this with Tailwind or it can be only done with JavaScript? I simplified the problem as much as…
I want to center the K in middle of the card, but how can I do that? I tried putting items-center to second div didn't work, because the second div is only height of letter K <div class="bg-orange-200 w-48 h-48…