DEV Community

Discussion on: Write My First Tailwind CSS Plugin

View post
Collapse
 
estubmo profile image
Eirik Mo •

This is great! Definitely gonna use this for my current project.

Although I do have one issue.
autofill:shadow-fill-transparent leaves me with a white background.


<input 
className="placeholder-gray-600 autofill:text-fill-gray-200 autofill:shadow-fill-transparent 
px-4 py-2 w-full text-gray-200 bg-transparent focus:bg-transparent 
border-0 border-b hover:border-gray-100 focus:border-gray-100 
border-gray-400 focus:outline-none"
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Your email address goes here"/>
Enter fullscreen mode Exit fullscreen mode

Would love some insight. Thank you!

Collapse
 
phuctm97 profile image
Minh-Phuc Tran •

Oh, shadow-fill-transparent can't work technically, because the way this plugin works is to create a "virtual" background layer using shadow and place on top of hard-coded browser background, so it has to be a solid color!

The walkaround for you is to use the same color with the underlying element's color instead of using transparent.

Collapse
 
estubmo profile image
Eirik Mo •

What if I have a gradient or an image?

Thread Thread
 
phuctm97 profile image
Minh-Phuc Tran •

In that case you’ll have build custom solution, I don’t think this solution can achieve that. Also, as far as I went into this problem, it may be not possible, because on autofill, browser automatically adds an extra background layer that is on top of the typical background and we can’t change color of it