All Questions
Tagged with tailwind-css javascript
1,522
questions
0
votes
0
answers
10
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
26
views
Dynamic Tailwind CSS Classes Not Applying Correctly on Initial Render in React Component [duplicate]
I am trying to achieve a rolling y-axis list which I successfully coded. Here is the behaviour.
I'm working on a React component where I dynamically apply Tailwind CSS classes based on a prop (...
0
votes
2
answers
37
views
I want to change the color of the body, but it takes up the entire screen
I'm creating a web page about a weather app, but I have a problem with the background-color of the body.
I gave the bodysuit the background color #191a38. Inside the body I have a main with the ...
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
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
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
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
1
vote
0
answers
19
views
Tailwind CSS Grid doesn't seem to be working properly while using Nextjs. Somtimes works with 4 cols, sometimes doesn't
I was working on this project where i had to use grid on a small component.
Main div :-
import Feature from "@/components/Feature";
export default function WebsiteFeatures () {
return (
...
-1
votes
0
answers
33
views
How to make a tooltip for a column in a table if the text in the column is larger than 250 pixels
I am using tailwind and shadcn for development.
My idea is that if the text in a column is larger than a certain number of pixels, it should be possible to see a tooltip from the shadcn library for ...
- 79
0
votes
0
answers
25
views
tailwindCSS not working in nextJS and Shadcn project
None of the tailwind classnames are working in this project.
I have one of each file like components.json, globals.css, and tailwind.config.ts, and the globals.css is imported in the layout.tsx file ...
- 385
0
votes
0
answers
44
views
tailwind not working with nextjs, shadcn components
I have a NextJS project using shadcn-ui components, but after adding tailwindCSS, none of the styling shows up when trying classnames.
I have configured the components.json, tailwind.config.ts, and ...
- 385
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
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 ...
0
votes
1
answer
32
views
Tailwind: dynamic grid columns with no gaps
The documentation is not very clear about all the grid options there.
I have this grid template in alpinejs styling it with tailwind:
<div x-show="multiple" class="w-auto grid mt-3&...
- 109
-1
votes
1
answer
38
views
How to get custom properties with resolveConfig function when using Tailwind CSS
Motivation and Usage
I am developing a TailwindCSS plugin and need to create a helper function that serves the configuration object, including those which come from the plugin, from the tailwind....
- 71