英文:
Tailwind CSS is not outputting classes for the background
问题
Tailwind CSS没有为背景生成类。
当我尝试创建一个简单的类，比如bg-black时，它没有添加到output.css文件中。然而，当我临时添加一些像网格或flex之类的内容时，它会将类添加到输出中。是语法问题、配置文件问题，还是完全不同的问题？如果需要更多代码，请告诉我，提前感谢！
配置文件（tailwind.config.js）：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html"],
theme: {
colors: {
transparent: "transparent",
current: "currentColor",
backgroundpink: {
DEFAULT: "#faeaf5",
},
primarypink: {
DEFAULT: "#eaa4b1",
},
vanilla: {
DEFAULT: "#f7e6de",
},
accentorange: {
DEFAULT: "#eabaa4",
}
},
extend: {},
},
plugins: [],
}
HTML文件（index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class="bg-black">
</body>
</html>
希望这些信息对你有所帮助。
英文:
Tailwind CSS is not generating classes for the background.
When I tried to create a simple class like bg-black, it didn't add it to the output.css file. However, when I would temporarily put something like a grid or flex in there, it would add the class to the output. Is it syntax, the config file, or something else entirely? Let me know if you need more code, and thanks in advance!
CONFIG (tailwind.config.js):
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html"],
theme: {
colors: {
transparent: "transparent",
current: "currentColor",
backgroundpink: {
DEFAULT: "#faeaf5",
},
primarypink: {
DEFAULT: "#eaa4b1",
},
vanilla: {
DEFAULT: "#f7e6de",
},
accentorange: {
DEFAULT: "#eabaa4",
}
},
extend: {},
},
plugins: [],
}
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class="bg-black">
</body>
</html>
答案1
得分: 1
颜色 black 在最终解析的 Tailwind 配置中不存在，因为您通过指定 theme.colors 对象完全覆盖了默认的 Tailwind 颜色。
如果您确实想要完全覆盖默认的 Tailwind 颜色但仍然希望保留 black 作为一种颜色，请将其添加到 theme.colors.black 中：
/** @type {import('tailwindcss').Config} */
module.exports = {
// …
theme: {
colors: {
// …
black: '#000',
},
extend: {},
},
// …
}
否则，如果您希望保留默认的 Tailwind 颜色，同时又定义自己的颜色附加于其中：
/** @type {import('tailwindcss').Config} */
module.exports = {
// …
theme: {
extend: {
colors: {
// 这里不严格需要“transparent”和“current”，
// 因为它们在默认的 Tailwind 颜色调色板中已经存在。
// transparent: "transparent",
// current: "currentColor",
backgroundpink: {
DEFAULT: "#faeaf5",
},
primarypink: {
DEFAULT: "#eaa4b1",
},
vanilla: {
DEFAULT: "#f7e6de",
},
accentorange: {
DEFAULT: "#eabaa4",
}
},
},
},
// …
}
英文:
The color black does not exist in the final resolved Tailwind configuration because you have completely overridden the default Tailwind colors by specifying theme.colors object.
If you did indeed want to completely override the default Tailwind colors but still want black as a color, add it to theme.colors.black:
/** @type {import('tailwindcss').Config} */
module.exports = {
// …
theme: {
colors: {
// …
black: '#000',
},
extend: {},
},
// …
}
Otherwise, if you wanted to keep the default Tailwind colors but define yours in addition:
/** @type {import('tailwindcss').Config} */
module.exports = {
// …
theme: {
extend: {
colors: {
// `transparent` and `current` aren't strictly needed here
// since they are in the default Tailwind color palette.
// transparent: "transparent",
// current: "currentColor",
backgroundpink: {
DEFAULT: "#faeaf5",
},
primarypink: {
DEFAULT: "#eaa4b1",
},
vanilla: {
DEFAULT: "#f7e6de",
},
accentorange: {
DEFAULT: "#eabaa4",
}
},
},
},
// …
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论