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
382
questions
1
vote
1
answer
5k
views
Why can't I pass variable as a className to tailwind-css?
I am trying to pass a context variable as a value to tailwind className in react. As per tailwind documentation bg-[hex-val] is used to pass custom color codes to background color.
I'm using Template ...
- 31
3
votes
1
answer
3k
views
Trouble with Dynamic Color in Tailwind Component
I'm having trouble understanding why the blue color is not working in my component. Could you please help me troubleshoot this issue on Stack Overflow? I have a Tag component that should apply ...
- 123
28
votes
2
answers
26k
views
How to use template literals in tailwindcss to change classes dynamically?
I tried to change it with this line of code it but it doesn't work
const [click, setClick] = useState(false);
const closeNav = () => {
setClick(!click);
};
const openNav = () => {
setClick(...
- 369
89
votes
14
answers
108k
views
Dynamically build classnames in TailwindCss
I am currently building a component library for my next project with TailwindCss, I just ran into a small issue when working on the Button component.
I'm passing in a prop like 'primary' or 'secondary'...
- 1,644
19
votes
5
answers
35k
views
React and Tailwind CSS: dynamically generated classes are not being applied
I'm just learning React and Tailwind CSS and had a strange experience with CSS grid using Tailwind classes. I've made the buttons for a calculator, with the last Button spanning two columns:
App.js:
...
4
votes
2
answers
3k
views
How to use dynamic tailwind classes with JS switch statement and pass them correctly in Vue?
I am a beginner to Vue JS and I'm trying to create a function for assigning corresponding colours to the order statuses. I would like to use switch-statement to achieve this, that would grab the value ...
12
votes
7
answers
16k
views
Text Stroke (-webkit-text-stroke) css Problem
I am working on a personal project with NextJs and TailwindCSS.
upon finishing the project I used a private navigator to see my progress, but it seems that the stroke is not working as it should, I ...
- 434
76
votes
2
answers
176k
views
Error message "Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null" [duplicate]
I'm facing
Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null.
In the Link component of the code:
import React, { useEffect, useState } from 'react';...
- 781
9
votes
2
answers
12k
views
Conditionally set background color in React component with Tailwind CSS
I am trying to use a hex color code passed through props to set the background color of a div. These are one-off colors that are generated dynamically, so cannot be added as a theme extension in ...
- 103
361
votes
28
answers
348k
views
How to add a @tailwind CSS rule to CSS checker
Tailwind CSS adds a @tailwind CSS at rule which is flagged as unknown.
How can I avoid this error?
For example, styles.css
@tailwind preflight;
@tailwind utilities;
- 5,821
237
votes
6
answers
338k
views
How to use calc() in tailwind CSS?
I have this html:
<div class="container h-screen w-screen">
<div class="navBar h-7"></div>
<div class="content-container"></div>
...
- 3,229
26
votes
5
answers
49k
views
Next Image not taking class properties
I am using Next.js and next/image to display images, but the CSS is not working inside it. The image is in SVG format and I have placed it in the public folder. I am using Tailwind CSS along with this....
- 321
5
votes
1
answer
3k
views
Why is the custom color in tailwind not defined in NextJS production stage
I created a custom color on tailwind in next js. On localhost the defined color appears fine, but when I deploy to vercel the color doesn't appear.
here's the picture localhost
production in vercel
...
- 282
41
votes
20
answers
161k
views
Tailwind class is not working after installed
I tried to use CSS, now I'm just installing tailwind css with npm, and then I build the css and provide the output.css. But, when I use the bg-black class in a button for testing, it's still not ...
- 439
20
votes
7
answers
41k
views
Problem with arbitrary values on Tailwind with React
I'm trying to make a react component that changes the width from a parameter but it's doesn't work and I don't know why.
function Bar() {
const p =80
const style = `bg-slate-500 h-8 w-[${...
- 203