Debug mode overwrite Tailwind style

[xkraty]

It appears that debug mode messes up the element styles. I have a small login form with a nice little border and outline

<%= form_for resource, as: resource_name, url: session_path(resource_name), html: { class: 'space-y-6' } do |f| %>
   <div class="col-span-2">
        <%= f.email_field :email, placeholder: true, autofocus: true, autocomplete: "email", class: "outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-600" %>
      </div>
<% end %>

With debug mode disabled, this is the output:

When debug mode is enabled, this is the output:

It applies at element level the following style:

element.style {
  outline: none;
  outline-offset: 0px;
}

[marcoroth]

Thanks for reporting @xkraty!

I wonder if we could use the CSS Custom Highlight API in the future to avoid having to set the outline and potentially breaking user-styles.