I'm learning next.js with React with tailwind css and was looking to read html static files from the public/assets folder: import React from 'react'; import fs from 'node:fs'; import parse from 'node-html-parser'; const HTMLComponent = ({ filename } : string)…
I am working on a Next.js project using Tailwind CSS with JIT mode enabled. I've encountered an issue where custom utility classes defined inside the @layer utilities block in my theme.css file are not being compiled and applied as expected.…
I'm encountering an issue with my Tailwind CSS code that seems to prevent me from scrolling to the bottom of an aside element. <body> <div> <nav class=" bg-white px-2 py-2.5 dark:bg-gray-800 sm:px-4 fixed w-full z-20 border-b border-gray-200 dark:border-gray-600 h-[63px]"> </nav>…
I have created a header menu on which I want to show the border-bottom of the red color & text-color of black on the active menu. To achieve this I am using the useLocation() function from the react-router-dom but it…
I have a card component: <template> <div class="z-50 flex w-[15vw] flex-col items-center justify-center gap-5 rounded-md border-2 border-gray-300 bg-[#f3f3f3] p-5 transition-all duration-300 hover:scale-105 hover:font-bold" > <div class="w-[100%]"> <div :class="color" class="flex w-fit items-center justify-center rounded-3xl px-2 text-sm text-white" > {{ collection }}…
I have a table using @tanstack/react-table and styled with ShadCN Table Component with a few adjustments for the sticky functionality and ShadCN Tooltip Component I have all of the Thead (th) components within a TableHeader(thead) sticky to the top. So…
I am building a website backend and frontend using MERN and I have finished the backend and it is now the frontend's turn to be developed. I am using Vite, TailwindCSS and PostCSS with of course React.js. So I have…
Currently using tailwindcss v3.3.5 and vite v5.0.0. I have followed the official tailwind docs on how to configure background image in tailwind.config.js file, but am unable to get the background image to appear on my element. My project folder structure:…
I'm currently facing challenges with Tailwind CSS v3.1 arbitrary variants not being applied as expected to a custom Angular dropdown component named app-drop-down. The primary concern revolves around setting a fixed width of 160px for the dropdown panel (bq-panel). Note…
I'm working on a React application using Tailwind CSS, and I'm facing an issue with text overflow within a dynamically sized container. I have a component (CenteredRectangle.tsx) that is intended to display a centered rectangle with text content. I want…