Adding Tailwind adds border inside focused Textfield elements

[JohanHeyvaert]

Describe the bug After adding Tailwind to the project (SvelteKit + smui) the TextFields get two inside vertical borders when focused. These vertical borders are not shown when the textfield is not focused.

To Reproduce Steps to reproduce the behavior:

1. Add Tailwind to a SvelteKit project that uses smui Textfield by following these instructions: https://tailwindcss.com/docs/guides/sveltekit
2. Now focus a Textfield and the problem appears

Expected behavior The vertical borders inside the input should not be shown.

Screenshots Cf. screenshot:

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 107

I was able to solve the problem by adding this style to my general css file:

/* Fix: smui + tailwind adds left & right borders within textfields */
.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
    border-left: 0;
    border-right: 0;
}

[FaCe2FaCe]

I have the same issue. Thanks for the fix.

[mrmikardo]

I have seen this issue when using TextField to wrap an input element.

[hperrin]

Thanks for the fix! I'm wondering if I should put this in the documentation, because including this code in SMUI might have unintended side effects down the road.

[mrmikardo]

@hperrin my gut feeling is that it would be good to have a "using SMUI with Tailwind" section in the docs 🙂