Beautiful UI components, crafted with Tailwind CSS. By the makers of Tailwind CSS.
Questions tagged [tailwind-ui]
249 questions
0
votes
0 answers
Why does my tailwindscss utility class not work in my nextjs component?
Can someone make me understand why this is not working ?
I imported my utility class as a string from my data file.
I'm using tailwindcss
enter image description here
enter image description here
Joelkarh
- 9
- 1
0
votes
3 answers
Why tailwind ui not rendered correctly in vue?
I have installed tailwind according to the documentation in tailwindcss.com with vue in laravel. But its rendered like this below -
Why ?
Configuration:
Installed tailwindcss using commands
npm install -D tailwindcss
npx tailwindcss init
2)In…
alprazolam
- 111
- 1
- 14
0
votes
3 answers
How to add overflow-hidden in the image of this tailblock component?
I am using the follwing tailblock component which is based on tailwind.css
What I want is when I hover, the image scales up within the image dimensions only. This means the image zooms but the dimension (height & width ) remains same.
I tried this,…
MagnusEffect
- 3,363
- 1
- 16
- 41
0
votes
1 answer
Tailwind Object-fit doesn't function
When trying to use object-contain in tailwind I get
Warning: Failed prop type: Invalid props.style key `object-fit` supplied to `Image`.
This is my code
noone
- 123
- 1
- 6
0
votes
3 answers
justify-content property not aligning content on main-axis on Grid
I'm using tailwind for CSS.
I have a simple div that has 3 children.
I want them to have space between them in the main-axis. Here's my whole code:
Anas Ansari
- 143
- 2
- 10
0
votes
1 answer
How to turn off autofix space in HTML tailwind?
There is a utility class in tailwind:
@apply block w-full bg-gray input-color-gray input-color-gray font-roboto-100 rounded-md sm: text-sm p-3 bg-gray pr-4;
Problem is when I save a document it formats inline style with space:
sm: text-sm
It…
user15444752
0
votes
1 answer
Tailwind CSS: Prevent rows from stretching vertically with row-span
I have the below HTML with a left column (image) and right columns.
The right columns have too much spacing in between, most probably because the grid spreads the items on the right vertically. I don't want any vertical space between them and…
migu
- 4,236
- 5
- 39
- 60
0
votes
2 answers
Invalid value for prop `logo` on ![]()
tag. Either remove it from the element, or pass a string or number value to keep it in the DOM
In my application, I have light and dark modes. To swap between two logo colors, since the text at some point has to be white and in another dark, I made this:
import React from "react";
import { ThemeContext } from "./themeContext";
…
Sermad NaJar
- 135
- 1
- 5
- 15
0
votes
2 answers
How to rewrite CSS rules on tailwind?
I have the following styles in figma:
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 16px;
position: absolute;
width: 227px;
height: 40px;
/* Button/Red */
background: #E30513;
/* RedBtn */
box-shadow: 0px 4px 12px…
user15444752
0
votes
1 answer
How to make page adaptive in tailwind?
I have a figma design template with login form in pixels:
.form {
position: relative;
width: 632px;
height: 1280px;
}
.row {
display: grid;
grid-column-template: 50% 50%
}
…
user18206178
0
votes
1 answer
How to break text for label with ::before?
There is a label with pseudo circle:
Problem…
user18206178
0
votes
1 answer
How to use before circle for text in tailwind?
How to use ::before circle for text in tailwind?
I have a text:
How to set red circle as ::before with padding?
user18206178
0
votes
1 answer
How to create semi circle with tailwind
I am trying to create a semicircle with a tailwind but I can't seem to find another way but this one.
Abel Kibebe
- 39
- 1
- 7
0
votes
1 answer
I cant seem to seperate the button from the actual function REACT
So i have watched this great tutorial on how to create a modal: https://www.youtube.com/watch?v=9DwGahSqcEc
And I have made it work. But the problem is that the guy in the video creates both the button and the modal all at the same place, and then…
Sermad NaJar
- 135
- 1
- 5
- 15
0
votes
1 answer
React hook form + Modal + data-bs-dismiss
I want to use a tailwind modal, who open & close with data-bs-dismiss argument.
I put on my button : data-bs-dismiss='modal'
But with react hook form, it's doesn't work like i want. If the form contains error or bad input, the data-bs-dismiss was…
sarcouilleizi94
- 215
- 1
- 8