51工具盒子英文:
Why is tailwind CSS not applying psuedo classes such as hover to my HTML elements?
问题 {#heading}
以下是您要翻译的HTML和配置文件部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script src="https://cdn.tailwindcss.com"></script>
<!--link rel="stylesheet" href="output.css" CDN FOR SO Purposes-->
</head>
<body class="bg-gray-100">
<main>
<div class="flex justify-center items-center min-h-screen">
<div class="grid-flow-row max-w-[330px] w-full bg-white p-8 rounded-lg shadow-lg">
<div class="mx-auto">
<img class="" src="../src/img/logo.gif" alt="logo">
</div>
<div class="border w-full"></div>
<div class="grid justify-items-center content-center">
<form class="grid justify-items-center content-center">
<input class="border mt-2 rounded-md p-1" type="text" id="username" placeholder="Username" autocomplete="username">
<input class="border mt-2 rounded-md p-1" type="password" id="password" placeholder="Password" autocomplete="current-password">
</form>
<button class="rounded bg-gray-300 mt-4 text-white font-bold h-8 w-1/2" onclick="">Submit</button>
</div>
</div>
</div>
</main>
</body>
</html>
配置文件：
module.exports = {
content: ["./dist/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
请注意，我已经将HTML和配置文件中的HTML标签和属性保留在翻译中，以保持代码的完整性。 英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
\<head\>
\<meta charset=\"UTF-8\"\>
\<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\>
\<title\>Test\</title\>
\<script src=\"https://cdn.tailwindcss.com\"\>\</script\>
\<!--link rel=\"stylesheet\" href=\"output.css\" CDN FOR SO Purposes--\>
\</head\>
\<body class=\"bg-gray-100\"\>
\<main\>
\<div class=\"flex justify-center items-center min-h-screen\"\>
\<div class=\"grid-flow-row max-w-\[330px\] w-full bg-white p-8 rounded-lg shadow-lg\"\>
\<div class=\"mx-auto\"\>
\<img class=\"\" src=\"../src/img/logo.gif\" alt=\"logo\"\>
\</div\>
\<div class=\"border w-full\"\>\</div\>
\<div class=\"grid justify-items-center content-center\"\>
\<form class=\"grid justify-items-center content-center\"\>
\<input class=\"border mt-2 rounded-md p-1\" type=\"text\" id=\"username\" placeholder=\"Username\" autocomplete=\"username\"\>
\<input class=\"border mt-2 rounded-md p-1\" type=\"password\" id=\"password\" placeholder=\"Password\" autocomplete=\"current-password\"\>
\</form\>
\<button class=\"rounded bg-gray-300 mt-4 text-white font-bold h-8 w-1/2\" onclick=\"\"\>Submit\</button\>
\</div\>
\</div\>
\</div\>
\</main\>
\</body\>
`</html>
`
<!-- end snippet -->
On the button when I add hover:bg-gray-400 nothing happens when you hover over it. It keeps the bg-gray-300 class and is not overridden but does not style with the pseudo class as expected. I'm trying to get pseudo classes to work but I just can't seem to figure it out. The issue does not lay in my code. It is in the setup of tailwind and I followed tailwindcss's directions to the t. They had to have changed the commands and not updated the docs
file structure is as follows
SRC↓
|>dist>[index.html, output.css]
|>node_modules>[lots of stuff]
|>src>
<div id="slider-single" class="owl-carousel slider-single be-wol"></div>, input.css]
`|>package-lock.json
|>package.json
|>tailwind.config.js
`
Below is my config file.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
module.exports = {
content: ["./dist/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
<!-- end snippet -->
答案1 {#1}
得分: 0
Tailwind 的输出文件可能很小，因为它支持树摇。未使用的类在运行构建命令时不会放入文件中。我只是没有意识到，我没有在命令的末尾添加 --Watch 选项来在开发环境中持续构建。所以确保在
npx tailwindcss -i 'input file' -o 'output file'.css
的末尾添加 --Watch。
英文:
The output file for tailwind can be small because of tree-shaking. The classes that aren't used won't be put in the file when running the build command. I had just not realized that I didn't add --Watch at the end of the command to keep building in the dev environment. So absolutely make sure you add --Watch to the end of
npx tailwindcss -i 'input file' -o 'output file'.css
