Tailwind-Styled-Component icon indicating copy to clipboard operation
Tailwind-Styled-Component copied to clipboard

Components remove duplicate values, break gradient

Open roadhump opened this issue 2 years ago • 1 comments

Looks like components created with this lib remove "duplicate" attributes and it particularly breaks gradient background where we have several from-, via- values.

const Background = tw.div`
    bg-gradient-to-r  from-indigo-500 from-10%  via-purple-500 via-20$  to-pink-500 to-90%
`

<Background />

# Result

<div class="bg-gradient-to-r from-10% via-20$ to-90%"></div>

comparing to simple components

export const Background = () => (
    <div className="bg-gradient-to-r  from-indigo-500 from-10%  via-purple-500 via-20$  to-pink-500 to-90%" />
)

# Result
<div class="bg-gradient-to-r  from-indigo-500 from-10%  via-purple-500 via-20$  to-pink-500 to-90%"></div>

roadhump avatar Mar 29 '23 19:03 roadhump

this might be an issue with tailwind-merge which is what this lib uses to remove duplicated classes 🤔

jahirfiquitiva avatar Apr 10 '23 22:04 jahirfiquitiva