CODEWITHSUNDEEP
reactjsnext.jstailwind-cssprimereact
Nicolas Stassun
Nicolas Stassun

Reputation: 1

How can I increase the width of the Password PrimeReact component

I'm using PrimeReact to do my front-end components and i can't change the width in the password component, but in the TextInput component is working.

Code:

'use client'

import CPFInput from "@/components/CPFInput/CPFInput";
import MotivoCard from "@/components/MotivoCard/MotivoCard";
import Image from "next/image";
import { InputText } from "primereact/inputtext";
import { Password } from 'primereact/password';
import { useState } from "react";

export default function Home() {

  const [value, setValue] = useState('');

  return (
    <main className="w-[100vw] h-[90%] flex items-center flex-col justify-center bg-[#FFFFFF]">
      <div className="bg-[#F0F0F0] h-[420px] w-[80%] lg:w-[30%] sm:w-[70%] md:w-[60%] flex items-center justify-around flex-col shadow-standard shadow-xl border-[1px] rounded-md overflow-y-auto custom-scrollbar" style={{ boxShadow: 'rgba(0, 0, 0, 0.24) 0px 3px 8px', border: '1px solid rgba(0, 0, 0, 0.125)' }}>
        <div className="h-[70%] w-full items-center flex flex-col gap-16">
          <div className="w-[80%]">
            <p>Cadastro</p>
            <InputText className="w-full border-2 pl-1" placeholder="Cadastro" />
          </div>
          <div className="w-[80%]">
            <p>Senha</p>
            <div className="w-full border-2 pl-1">
              <Password value={value} feedback={false} onChange={(e) => setValue(e.target.value)} toggleMask />
            </div>
          </div>
          <button className="w-[80%] h-[40px] bg-[#00579D] text-white rounded-lg">Entrar</button>
        </div>
      </div>
    </main>
  );
}

I tried to add some tailwind classes in the password component but is not working

Upvotes: 0

Views: 69

Answers (0)

Related Questions