Tailwind CSS为什么不能将伪类(例如:hover)应用到我的HTML元素?

huangapple go评论154阅读模式
英文:

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 -->

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&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↓
   |&gt;dist&gt;[index.html, output.css]
   |&gt;node_modules&gt;[lots of stuff]
   |&gt;src&gt;, 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: [&quot;./dist/**/*.{html,js}&quot;],
  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 &#39;input file&#39; -o &#39;output file&#39;.css

huangapple
  • 本文由 发表于 2023年8月11日 02:53:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76878609.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定