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,023
questions
0
votes
1
answer
38
views
Scroll Animation Resets after Sometime
So I am making my own portfolio website. And I wanted to add scroll animation with technologies I know:
I am using tailwind.css with next.js
I have my own component on Scrool.jsx
But scrolling stops ...
1
vote
0
answers
26
views
How to do the fluid typography trick in tailwind?
I have always used this line in my vanilla css projects
html {
font-size: calc(100vw / 1920px * 10px);
}
body {
font-size: 3rem;
}
this makes my life easier to i design with figma at 1920 so if ...
- 336
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
19
views
Is there a way to create different css files for dark/light tailwind
I have a NextJS project, I am using tailwind and my project suffers from ver large sized css files. Around 65KB. I want to split light and dark mode css files. Is there any webpack plugin for this? or ...
- 21
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-...
-1
votes
0
answers
28
views
Images not displaying with correct source
I wanna display two images and some logos, also some bottom icons but no image is on screen whatsoever, also there's no error. I can't see what I'm doing wrong.
All the assets are exported in a file ...
- 142
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
0
votes
0
answers
36
views
Tailwind CSS Styles Not Applying Automatically in React Project
I'm working on a React project and have integrated Tailwind CSS for styling. However, the Tailwind CSS styles do not apply automatically when I make changes to my CSS or component files. I have to ...
0
votes
0
answers
20
views
Blended in background color's opacity does not change with bg-opacity
<html lang="en">
<head>
<meta charset="utf-8" />
<title>humhum</title>
</head>
<body
class="min-h-...
1
vote
0
answers
69
views
Tailwind CSS and Next.js: Local Images Not Rendering with Pseudo Elements
I'm working on a project using Tailwind CSS and Next.js. Despite extensive research, I've encountered an issue I can't resolve.
The Problem:
I am trying to use pseudo-elements ::before and ::after to ...
- 11
-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
0
votes
1
answer
18
views
Tailwind width transition for non specific values
I got a button styled with Tailwind and Vue js 3. This button contains a classic "Login" text. I want to achieve that when the user clicks and a loading status is triggered, the button ...
- 109