How to limit tailwind CSS to a specific react component

Question

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 (
    <div className="Login w-full h-screen bg-background flex flex-col items-center justify-center text-white font-inter">
      <h1 className="text-8xl font-sheppards mb-20 text-zinc-100">
        LibManagement
      </h1>
      <form onSubmit={handleSubmit} className="w-[605px] flex flex-col gap-8">
        {/* Username Field */}
        <div>
          <label
            className="block text-4xl font-extrabold mb-2"
            htmlFor="username"
          >
            Username
          </label>
          <input
            id="username"
            type="text"
            name="username"
            placeholder="Enter your username"
            value={formData.username}
            onChange={handleChange}
            className="w-full h-12 px-4 bg-input text-black text-xl rounded"
          />
        </div>

        {/* Password Field with Eye Toggle */}
        <div className="mb-4">
          <label
            className="block text-4xl font-extrabold mb-2"
            htmlFor="password"
          >
            Password
          </label>

          <div className="relative w-full">
            <input
              id="password"
              type={showPassword ? "text" : "password"}
              name="password"
              placeholder="Enter your password"
              value={formData.password}
              onChange={handleChange}
              className="w-full h-12 px-4 bg-input text-black text-xl rounded"
            />

            {/* Eye icon button */}
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
              className="absolute right-3 top-1/2 -translate-y-1/2"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6 text-[#1E1E1E]"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                {showPassword ? (
                  <path
                    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"
                  />
                ) : (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0zM2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                  />
                )}
              </svg>
            </button>
          </div>
        </div>

        {/* Submit Button */}
        <div className="flex justify-center">
          <button
            type="submit"
            className="w-full h-20 bg-brandYellow text-black text-6xl font-extrabold rounded-md shadow-md hover:brightness-95 transition"
          >
            Login
          </button>
        </div>
      </form>
    </div>
  );
}
export default Login;

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: [],
};

index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

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:

Wow TailwindCSS v2 configuration. Just use preflight: How to reset specific container child tags from TailwindCSS styles — rozsazoltan
– rozsazoltan, Commented Jul 24 at 7:04

Olivier Boissé · Accepted Answer · 2025-07-23 19:16:29Z

3

Tailwind has an opinionated set of base styles called Preflight. These styles are applied globally, that's why the others pages of your projet get affected.

Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

From your index.css, I suppose you are using Tailwind V3 (which is not the latest version), here is the documentation to disable preflight in your config file

Tailwind V3

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  },
  ...

Tailwind V4

In latest version of Tailwind, you must replace

@import "tailwindcss";

by

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

edited Jul 23 at 19:16

answered Jul 23 at 19:00

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asmaa Almadhoun Sep 6 at 18:45

I agree with your solution, disabling Preflight in v3 or using the new layered imports in v4 is the right way to prevent Tailwind’s base styles from affecting other pages.

Srinivas Palsa · Accepted Answer · 2025-07-23 19:40:06Z

0

To limit Tailwind CSS styles to a specific React component, you can scope Tailwind classes using custom prefixes, context wrappers, or CSS Modules. Tailwind is global by default, so it doesn't naturally scope to one component

answered Jul 23 at 19:40

Srinivas Palsa

12 bronze badges

Collectives™ on Stack Overflow

How to limit tailwind CSS to a specific react component

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related