不在 PHP 文件中应用 TailwindCSS 样式的类答案

【问题标题】：Classes not applying TailwindCSS styles in PHP File不在 PHP 文件中应用 TailwindCSS 样式的类
【发布时间】：2022-12-06 07:20:40
【问题描述】：

页面代码已正确检测到 TailwindCSS 样式表，但尽管如此，类名并未应用样式。我已将它复制到 TailwindCSS Playground 中，看看它是否在那里工作，确实如此，所以我不知道为什么它在这里不起作用。

页面代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Exceptional Kids | Login</title>
        <link href="../style.css" rel="stylesheet">
    </head>
    <body>
        <div class="flex justify-center items-center h-screen">
            <div class="border-4 border-black rounded-3xl flex justify-around p-10">
                <div class="text-center border-r-2">
                    <p class="text-xl font-bold">Login</p>
                    <form action="/api/login" method="post" class="px-5">
                        <div>
                            <label for="email">Email: </label>
                            <input type="email" name='email' class="shadow-md mx-4 my-2" /><br />
                        </div>
                        <div>
                            <label for="password">Password: </label>
                            <input type="password" name='password' class="shadow-md mx-4 my-2" /><br />
                        </div>
                        <input type="submit" value='Login' class="border-2 p-1 my-5 rounded-md" />
                    </form>
                </div>
                <div class="text-center border-l-2">
                    <p class="text-xl font-bold">Sign Up</p>
                    <form action="/api/signup" method="post" class="px-5">
                        <div>
                            <label for="firstName">Enter name of parent/guardian: </label>
                            <input type="text" name='firstName' class="shadow-md mx-4 my-2" /><br />
                        </div>
                        <div>
                            <label for="lastName">Enter name of parent/guardian: </label>
                            <input type="text" name='lastName' class="shadow-md mx-4 my-2" /><br />
                        </div>
                        <div>
                            <label for="email">Enter parent/guardian&apos;s email: </label>
                            <input type="email" name='email' class="shadow-md mx-4 my-2" /><br />
                        </div>
                        <div>
                            <label for="password">Enter password: </label>
                            <input type="password" name='password' class="shadow-md mx-4 my-2" /><br />
                        </div>
                        <input type="submit" value='Create Account' class="border-2 p-1 my-5 rounded-md" />
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

TailwindCSS 配置文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,php}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

【问题讨论】：

你在隐身模式下测试过吗？您可能需要打破缓存，例如将动态生成的查询字符串添加到<link href="../style.css" rel="stylesheet">，例如<link href="../style.css?<?= time() ?>" rel="stylesheet">

标签： php html tailwind-css

【解决方案1】：

我遇到了同样的问题做了以下事情：

替换这个=> 有了这个=>

你只需要输入“？”在 style.css 之后，即 style.css？

希望这对你有用！

【讨论】：

【解决方案2】：

第一次运行

npm 运行观察

然后刷新页面

【讨论】：