We're about to start a Next.js project using Tailwind for styling. We're fairly new to both technologies but we've started to pull together the UI and so far so good. However, we're seeing a lot of replication in styling. For…
I was recently building a website using NuxtJs and ran into a problem: I cant center components in a that are in a flex column. but when i removed the "flex-col" class everything seemed to work fine. Here's my code:…
I'm trying to use some SVG I made in Figma on a website. For the life of me I cant make the SVG respect the parent container. I'm using Tailwind for CSS. Here is the code: <script src="https://cdn.tailwindcss.com"></script> <div class="space-y-4">…
i have a home page having the following : import { Button } from "@/components/ui/button"; import Link from "next/link"; export default function Home() { return ( <main className="flex flex-col justify-center h-full text-center max-w-5xl mx-auto gap-6"> <h1 className="text-5xl font-bold">Invoicipedia</h1> <p> <Button…
I'm working on a reviews section in my React application using Tailwind CSS, where I want each review card to adjust its height based on the amount of text it contains. However, despite using a flexbox layout, all the cards…
I need a React Component to show some pictures in a custom layout made out by 'n' number of flex layouts. Each of this flex has an array of pictures wrapped in another flex, with flex-direction: column. The goal is…
I am designing a sidebar where the active item should have concave curves on the top-right and bottom-right corners. I'm using Tailwind CSS for styling, and I initially tried setting borderTopRightRadius: '0%' and borderBottomRightRadius: '0%', but it results in straight…
I'm writing a WordPress plugin using ReactPress as well as Tailwind and don't want the part of my application's CSS that is written in React to affect the styles of the Wordpress part. However, since index.css @tailwind base; @tailwind components;…
The first child div is a sidebar and the second a table: <div class="flex w-full flex-col items-start justify-start gap-6 md:flex-row"> <div class="flex w-full flex-col items-start justify-start gap-2 md:w-auto"> <!-- Sidebar (md:max-w-64) --> </div> </div> <div class="flex w-full flex-col items-start justify-start…
I had to adapt a code written by someone else. Using Tailwind and Angular. I had to add an optional text line, so there would be 1 or 2 lines. Both lines should align just right of some title. And…