英文:
Using custom colors in Tailwind
问题
我正在尝试在我的React/TypeScript应用中使用Tailwind创建自定义十六进制颜色。为什么背景颜色不随颜色变量值而改变？以下是我的代码：
import React, { useState } from 'react';
const ColorChanger = () => {
const [color, setColor] = useState('#ffffff');
const handleColorChange = () => {
const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
console.log("setColor =", randomColor);
setColor(randomColor);
};
return (
<div>
<div className={`w-20 h-20 bg-[${color}] mx-auto mb-4`}>{color}</div>
<button
type="button"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={handleColorChange}
>
Changer la couleur
</button>
</div>
);
};
function App() {
return (
<div className="App">
<ColorChanger />
</div>
);
}
export default App;
Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
App.css
@tailwind base;
@tailwind components;
@tailwind utilities;
如何在Tailwind CSS中使用自定义颜色？
英文:
I'm trying to create custom hex colors for my React/TypeScript app using Tailwind.
Why doesn't the background color change with the color variable value?
Here is my code:
import React, { useState } from 'react';
const ColorChanger = () => {
const [color, setColor] = useState('#ffffff');
const handleColorChange = () => {
const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
console.log("setColor = ", randomColor)
setColor(randomColor);
};
return (
<div>
<div className={`w-20 h-20 bg-[${color}] mx-auto mb-4`}>{color}</div>
<button
type="button"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={handleColorChange}
>
Changer la couleur
</button>
</div>
);
};
function App() {
return (
<div className="App">
<ColorChanger />
</div>
);
}
export default App;
Index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
App.css
...
@tailwind base;
@tailwind components;
@tailwind utilities;
How can I use custom colors with Tailwind CSS?
答案1
得分: 2
看起来你在使用Tailwind CSS类中遇到了一些问题。Tailwind CSS通常不支持在类名中使用动态变量，这可能导致背景颜色不会改变的问题。
修复这个问题的一种简单方法是在React中使用内联样式。你可以直接在div上设置backgroundColor，就像这样：
<div style={{backgroundColor: color}} className="w-20 h-20 mx-auto mb-4">{color}</div>
这样，你的颜色状态将直接应用于div的backgroundColor，同时保持其他Tailwind样式不变。
英文:
It looks like you're having trouble with using dynamic colors in your Tailwind CSS classes.
Tailwind CSS doesn't usually support dynamic variables in class names, which might be causing your issue with the background color not changing.
One simple way to fix this is to use inline styles with React. You can set the backgroundColor directly on your div like this.
<div style={{backgroundColor: color}} className="w-20 h-20 mx-auto mb-4">{color}</div>
This way, your color state will be applied directly to the div's backgroundColor, while still keeping your other Tailwind styles intact.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论