Как ограничить CSS Tailwind определенным компонентом React ⇐ CSS

[Anonymous]

I am currently new to Tailwind CSS and figuring out why my login component CSS classes are also applied to every other component as well, I've tried scoping this CSS classes with modules as well but that also did not worked
Login component:

Код: Выделить всё

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";

function Login() {
const [formData, setFormData] = useState({
username: "",
password: "",
});
const [showPassword, setShowPassword] = useState(false);
const navigate = useNavigate();

function handleChange(e) {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
}

function handleSubmit(e) {
e.preventDefault();
axios
.post("http://localhost:8080/user/login", formData)
.then((response) => {
localStorage.setItem("authToken", response.data);
navigate("/");
setFormData({ username: "", password: "" });
})
.catch((e) => {
alert("Login failed.  Please check your credentials.");
});
}
return (


LibManagement


{/* Username Field */}


Username



{/* Password Field with Eye Toggle */}


Password





{/* Eye icon button */}
  setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2"
>

{showPassword ? (
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"
/>
) : (

)}





{/* Submit Button */}


Login




);
}
export default Login;

< /code>
tailwind.config

:

Код: Выделить всё

// tailwind.config.js
module.exports = {
mode: "jit",
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
background: "#121964", // main background color from Figma
backdrop: "rgba(0, 18, 222, 0.35)", // optional overlay
input: "#D9D9D9",
brandYellow: "#F3CE39",
white: "#FFFFFF",
black: "#000000",
"icon-default": "#1E1E1E",
},
fontFamily: {
inter: ["Inter", "sans-serif"],
sheppards: ["'Mrs Sheppards'", "cursive"],
},
},
},
plugins: [],
};
< /code>
index.css

:
@tailwind base;
@tailwind components;
@tailwind utilities;
< /code>
This is my main login component looks which is expected:


This screenshot shows my other component getting affected not understanding why:


This screenshot shows my other component before getting affected:



Подробнее здесь: https://stackoverflow.com/questions/797 ... -component