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">
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
&lt;!--link rel=&quot;stylesheet&quot; href=&quot;output.css&quot; CDN FOR SO Purposes--&gt;
&lt;/head&gt;
&lt;body class=&quot;bg-gray-100&quot;&gt;
&lt;main&gt;
&lt;div class=&quot;flex justify-center items-center min-h-screen&quot;&gt;
&lt;div class=&quot;grid-flow-row max-w-[330px] w-full bg-white p-8 rounded-lg shadow-lg&quot;&gt;
&lt;div class=&quot;mx-auto&quot;&gt;
&lt;img class=&quot;&quot; src=&quot;../src/img/logo.gif&quot; alt=&quot;logo&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;border w-full&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;grid justify-items-center content-center&quot;&gt;
&lt;form class=&quot;grid justify-items-center content-center&quot;&gt;
&lt;input class=&quot;border mt-2 rounded-md p-1&quot; type=&quot;text&quot; id=&quot;username&quot; placeholder=&quot;Username&quot; autocomplete=&quot;username&quot;&gt;
&lt;input class=&quot;border mt-2 rounded-md p-1&quot; type=&quot;password&quot; id=&quot;password&quot; placeholder=&quot;Password&quot; autocomplete=&quot;current-password&quot;&gt;
&lt;/form&gt;
&lt;button class=&quot;rounded bg-gray-300 mt-4 text-white font-bold h-8 w-1/2&quot; onclick=&quot;&quot;&gt;Submit&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;
<!-- 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]
|&gt;package-lock.json |&gt;package.json |&gt;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
