All Questions
Tagged with tailwind-css css
4,121
questions
0
votes
0
answers
7
views
Create Tailwind Plugin Class That Generates Various Hover And Focus States
Currently I'm using the @apply like so to create a simple error class I can add to input elements to highlight them.
.error{
@apply
outline
outline-red-500
focus:outline
focus:...
1
vote
1
answer
39
views
Animating a progress bar styled as a dotted line
I'm creating a progress/volume bar component with Angular/Tailwind where the percentage increments are colored circles. All gray circles means 0%, all blue means 100%, 10 out of 20 means 50%, etc.
I ...
0
votes
1
answer
22
views
Text overflow ellipses are not showing, instead text just hidden
I am trying to add tabs to an app. The tabs get smaller the more I add, how the tab text is just hidden instead of showing ellipses. Can anyone help?
enter image description here
enter image ...
0
votes
1
answer
50
views
Why is the background image in my code not fitting up the screen completely?
I've written a code in React JS and used Tailwind CSS to insert a background image in my code but the image is not filling up to the whole screen. Instead, the image has a margin of the same size on ...
1
vote
2
answers
28
views
tailwind apply doesnt work in tailwind version 3
I have installed tailwind successfully. When it comes to using the @apply, things are not working.
<body>
<!-- header -->
<header class="bg-transparent absolute top-0 left-...
- 11
0
votes
2
answers
32
views
Alling a menu to the right of a button positioned in a table column
I have a webpage with a table in which the last column is a button that opens a dropdown menu (for simplicity, the example does not include JS):
<head>
<meta charset="UTF-8">
&...
- 146
0
votes
1
answer
29
views
Struggling to get this scrollable table with fixed top and left side working
So I have this project where I have a page with a header and then a table.
Now for the table I need to have the top most row to be fixed AND also have the left most column be fixed when I scroll. I ...
- 5,624
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
1
answer
21
views
Tailwind max-w-[number] not working past a certain point
My stack is Svelte 5 / Sveltekit / Tailwind / Daisy UI
I have a svelte component that uses a Daisy UI card and I am unable to get tailwind max-w-[number] class to work past a certain point to increase ...
- 137
-1
votes
1
answer
28
views
Why the hover class is not working on tailwind?
I'm trying to style a button with tailwind on Next.js.
I want the button background color to change on hover.
I'm trying to style a button doing something like this
<button className="rounded-...
0
votes
4
answers
67
views
JS not opening a button as intended
I'm working on a header section in HTML and decided to learn JavaScript in this project. I'm also using TailwindCSS, with a few specifics I included in a different .css file.
I got the JS code from ...
- 3
-1
votes
0
answers
50
views
Is it possible to absolute position a container to the left of a scrollable container [closed]
My issue is that I have code similar to
<div style={{ display: "flex" }} className="App">
<div
style={{
height: "100vh",
width: "200px&...
- 63
0
votes
1
answer
48
views
How do I extend the peer- modifier in Tailwind to allow it to work on any sibling?
I would like to extend the peer- modifier in Tailwind such that when I write this:
<div class="peer peer-hover:opacity-50"></div>
<div class="peer peer-hover:opacity-50&...
- 2,574
0
votes
1
answer
23
views
Disable browser/page navigation while horizontally scrolling iframes?
My site has a container of iframes placed side-by-side, which creates a horizontal scroll. When users use a two-finger gesture/trackpad scroll outside the iframe, it scrolls as expected. However, when ...
- 1,746
1
vote
2
answers
49
views
tailwindcss background not changing to correct color
There is a feature i implemented in the tiktaktoe wherein if a player wins the game, then the winning box gets green in color and if there is a draw , then all the box becomes red. The feature is ...
