twMerge() + clsx() = cn() ?為啥 Shadcn 要用這些輔助函式?
如果翻閱 Shadcn 元件集的元件會發現大量使用到一個輔助函式 cn,背後使用 twMerge(clsx(inputs)),它其實是兩套函式庫的組成,用於更方便建構元件當中 Tailwind 的樣式。為什麼會需要額外的庫和方法來建構元件樣式呢?
如果翻閱 Shadcn 元件集的元件會發現大量使用到一個輔助函式 cn,背後使用 twMerge(clsx(inputs)),它其實是兩套函式庫的組成,用於更方便建構元件當中 Tailwind 的樣式。為什麼會需要額外的庫和方法來建構元件樣式呢?
撰寫這篇文章是因為接手過非常反人類的 Tailwind 專案,一些不應該出現的反模式其實都可以在早期被輕鬆避免,當專案規模變大時,這些反模式就會變成一個巨大的問題難以修正。這篇文章將會介紹一些我在專案中看到的反模式,並且提醒你千萬不要這麼做!
意思是說「如果你熟悉撰寫原生 CSS 的話,那麼學 Tailwind 對你來說是易如反掌」。在 2022 CSS 調查中 Tailwind 都是最受歡迎、最多人使用的 CSS 框架,它開創性的設計理念打破了傳統語意化架構 CSS 的方式,值得嘗試看用不同的方式架構網站架構!