How to build this input?

[edalzell]

I'm exploring replacing my existing components w/ Flux. Starting with a simple one, a text input.

Trying to build this, without publishing the flux components:

<div>
  <label for="email" class="block mt-2 text-sm font-medium leading-6 text-white">Email Address</label>
  <div class="mt-1 sm:mt-0 sm:col-span-2">
    <div>
      <input
        wire:model="email" 
        wire:keydown.enter.prevent="nextStep" 
        id="email" 
        type="email" 
        placeholder="[email protected]" 
        autocomplete="email" 
        class="block w-full border-0 py-1.5 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-lime-300 sm:text-sm sm:leading-6 font-mono"
      >
    </div>
  </div>
</div>

How would you folks approach this? I notice you can't really override the input classes, easily.

Mine on the top, flux on the bottom. Note that the focus ring should be green (top) but it's blue in flux.

[igmltd]

Have you tried using tailwinds important prefix !, that usually works.

[edalzell]

Yes but my issue is that the classes on the input need to be customized, which would, at the moment either require the component to be published (which I'd like to avoid cuz those components are cray cray complicated) or a weird TW hack.

Hoping for something better.

[joshhanley]

@edalzell can you open an issue for this?

[edalzell]

sure thing: #691, thanks Josh.