英文:
Why is tailwind CSS not applying psuedo classes such as hover to my HTML elements?
问题
以下是您要翻译的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>, 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
得分: 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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论