Classes not applying TailwindCSS styles in PHP File
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
The TailwindCSS stylesheet is being properly detected by the page code, but despite this the class names are not applying the styles. I’ve copied this into the TailwindCSS Playground to see if it works there, and it does, so I don’t know why it isn’t working here.
Page Code:
<!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'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 Config File:
/** @type {import(‘tailwindcss’).Config} */
module.exports = {
content: [“./src/**/*.{html,php}”],
theme: {
extend: {},
},
plugins: [],
}
أضف إجابة