Questions tagged [tailwind-css]
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
tailwind-css
10,020
questions
-4
votes
0
answers
18
views
The vh is returning different values in different component in the same screen [closed]
these two have the same height of 9vh but are being displayed with different height
<div
className="flex items-center w-full h-[9vh] border-b-[0.5px] border-[#524FA4] cursor-...
-1
votes
2
answers
40
views
Tailwind CSS: Grid with preset cols does not take up the space of its child
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-...
- 24
0
votes
1
answer
33
views
TailwindCSS Breakpoints aren't applying [closed]
I have a NextJS 14 project that I am using Tailwind CSS with. I have the following:
<div className="text-amber-dim md:text-amber flex-1 h-screen flex items-center justify-center">
&...
- 3
0
votes
1
answer
54
views
Text fill effect but controlled by percentage
I'm attempting to create a text fill effect that will be controlled by a useState.
I have the following text:
According to a state I want it to be filled from left to right, although the last letter ...
- 1,102
0
votes
1
answer
31
views
Do Tailwind CSS arbitrary values affect performance?
I'm using Tailwind CSS in a project and I'm curious about the performance implications of using arbitrary values.
The project performance is critical, rather than achieving a pixel-perfect UI. So, ...
- 71
0
votes
0
answers
27
views
Creating dashboard with Metronic & Vue & Tailwind
So I want to create a dashboard with metronic vue tailwind. I have 2 zip files, the first is metronic vue 8 and the second is metronic tailwind html 9. first zip is a sample dashboard with vue and ...
- 21
0
votes
0
answers
35
views
I get a blank page when I try to access my site on iOS
i'm actually working on an app built with reactJs, i can access it from all the platforms
(Fedora, Android, Windows, Mac OS), but on iPhone I just get a blank page, with this error.
Versions:
react: ...
- 11
0
votes
0
answers
28
views
TailwindCss has different colors in Dist Build and run Dev
I need to help please, I have been building a project with tailwindCss and React, with Vite, but when I build my project then generate the dist carpet, but the colors are different when I run project ...
- 25
0
votes
1
answer
36
views
TailwindCSS calc not working when implementing header
I am trying to create a header, below is my implementation of it, I used calc to subtract the height preserved for the header:
<div className='flex flex-col h-full'>
<Header/> /...
- 11
-2
votes
4
answers
53
views
Why isn't the following text being collapsed into a ellipsis?
This is the code:
<div class="grid w-full gap-4 grid-cols-8">
<div class="flex w-full flex-col gap-1 justify-center items-center max-w-small cursor-not-allowed"><...
- 54.7k
0
votes
0
answers
16
views
backdrop-blur not working in modal using tailwindcss
I want to blur the background when the modal pops up and currently it does not work
HTML:
<!-- modal -->
<div id="modal" class="w-4/5 sm:3/4 md:w-2/3 lg:w-1/2 bg-gray-300 ...
-2
votes
0
answers
24
views
How to change the color of the svg icon using tailwindcss only while hovering through it? [duplicate]
I already read the questions about the SVG and this question my question is about how to do this with Tailwindcss only.
The project tools are React and Tailwindcss.
I want to change the color of the ...
- 131
-2
votes
0
answers
24
views
Dropdown menu React - Typescript - Tailwind [closed]
I am working on a project and I need a sample code of dropdown menu using tailwind CSS and React.Ts. If anyone could help me I would greatly appreciate it.
This is my code, it needs to look like the ...
-1
votes
1
answer
38
views
How to set position of a button at a the edge of its parent container
can someone tell me how to position my button labeled as "View Details" on the edge of its parent container. I am using tailwind CSS.
I want to position my button at bottom edge of the card.
...
1
vote
3
answers
38
views
Why does hardcoding the classname work, but putting it together from args doesnt tailwind
Im just experimenting with Tailwind, i want to make a component that receives a colorname and then displays all the values of that color.
const Square = ({ clr }: { clr: string }) => {
return <...
- 1,379