All Questions
Tagged with tailwind-css tailwind-ui
265
questions
1
vote
1
answer
33
views
Tailwind gradient not working when using template literals
I'm trying to adjust the following gradient:
bg-gradient-to-r from-rose-400 to-rose-50 from-${percentage}% to-${percentage}%
where percentage is a changing variable.
When I replace the template ...
- 115
0
votes
0
answers
20
views
Problem using 'Fill' atributte in tailwind with NEXT.JS app
Im working on an Next App and adding styles with tailwind.The problem is that i have an Image with the atribute fill , envolved in a div with the positionrelative.Sometimes when I run my app locally, ...
- 9
0
votes
0
answers
21
views
Why does the bg-white class stop working in Tailwind CSS when I extend the colors in my tailwind.config.js, and how can I fix it?
I am using Tailwind CSS and have extended some colors in my tailwind.config.js file. However, when I add the bg-white class or any other class, no color appears until I comment out all the extended ...
1
vote
2
answers
37
views
tailwind using in-between classes
When using tailwind (example, setting height as per documentation here - DOCS),
we have predefined values as such
h-40 height: 10rem; /* 160px */
h-44 height: 11rem; /* 176px */
but the in ...
- 4,866
0
votes
1
answer
44
views
Tailwind CSS responsive classes / state classes not working
I'm using transform translate-y-value transtion. What I want is for these classes to activate using 'focus' on screens smaller than 'lg' and 'hover' on screens 'lg' or larger.
The idea was to tackle ...
0
votes
2
answers
60
views
why my website is showing full on pc screen but on mobile white stripes
when in pc screen it shows full width but when switch to mobile it is not full width looks like it's width is 80-90% also my constent is overflowing outside so it is not so responsive on mobile whyy [...
0
votes
1
answer
100
views
Tailwind: Sticky while scrolling
I'm attempting to create a layout where I have an image that sticks to the left side of the viewport while scrolling until the content ends, at which point it should scroll to the next section.
...
- 54.7k
0
votes
1
answer
27
views
Tailwind child element with 'h-full' is oversized like parent with 'h-screen'
I have page with Tailwind.
Code is here:
<div id="parent" class="flex h-screen flex-col bg-red-600">
<div id="child1" class="flex h-20 items-center ...
1
vote
1
answer
123
views
Sticky header and footer with Next.js
I used React pretty extensively before but I am very new to Next.js and the layout logic doesn't make much sense to me. From what I understand if layout.js is under /app that means that layout applies ...
- 187
0
votes
2
answers
36
views
In tailwindCss config file, I have to add my own class names which will be consisting of tailwind classes. How to do that?
To use flex, I have to write flex justify-between items-center in all element classNames, but I have to make a general class let us say "flexBetween" which will have all these flex justify-...
0
votes
1
answer
26
views
I am importing tailwind class string from utils to index page in app folder but it is not working. Using directly as classnames in app folder works
utils/responsiveBox
const responsiveBoxClass = "border-2 border-[red] xxsmScr:border-tahitiii xsmScr:border-[blue] smScr:border-[green] midScr:border-[orange] bigScr:border-[white] biggerScr:...
5
votes
2
answers
746
views
Material Tailwind - TypeError: Cannot read properties of null (reading 'useContext')
I am making a client project using React with Typescript and using Material Tailwind UI - MT. But when using MT's components, I get a useContext error, it seems to be reported in MT's theme.js. I have ...
0
votes
1
answer
28
views
How to render iterated items of map in two rows in React js
//assets.js
import sorare from './sorare.svg'
import visa from './visa.svg'
import sling from './sling.svg'
import safety_wing from './safety-wing.svg';
import unqork from './Un_qork.svg';
import ...
- 111
-1
votes
1
answer
42
views
Issues with alignment when trying to draw lines between circle shaped divs
I am trying to create a vertical navigation menu with a certain style (as shown in the image attached to this post). In the image, there are 3 vertically aligned circles the same size as the font, the ...
- 105
0
votes
1
answer
65
views
How to show the initial value of a select component on Material Tailwind React Select Component with options that are mapped?
Apparently in the example of using the select component, the options of the Select are not mapped and are singular objects on their own. Currently I am trying to make a select component that shows the ...
