search

signavio / react-mentions

@mention people in a textarea
https://react-mentions.vercel.app
Other
2.42k stars 566 forks source link

Tailwindcss ring and focus utils not working (padding, shadow, background color works fine) #666

Open TrustyTechSG opened 1 year ago

TrustyTechSG commented 1 year ago

Steps to reproduce:

  1. "tailwindcss": "^3.3.0"
  2. Pass tailwindcss "bg-white rounded-md py-1.5 px-2.5 shadow-sm" to MentionsInput className, everything works.
  3. Continue add tailwindcss "border-0 outline-none focus:ring-teal-600 focus:ring-2", not working, the default blue focus ring from browser still showing.
  4. Only change <MentionsInput to HTML <input, every css utils above works.

Expected image

Actual result image

runabol commented 1 month ago

@TrustyTechSG Running into the same issue? Wondering if you found any solution for this?