Re:Tailwind vs. Semantic CSS
by TheHiddenSun on Thursday October 26, 2023 @07:17PM
(#38032880)
Author is using tailwind wrong
Complaining about a technology (tailwind) while not using its surrounding ecosystem is not really a good way to build things.
How to do it:
- encapsulte/extract react/jsx components - for readability, so you do not have a wall off endless meaningless divs. Examples: Article, ArticleHeader, ArticleContent, ArticleSummary, etc...
- use cva https://github.com/joe-bell/cva to style generic ui components (like buttons) to archive same grouping as in semantic css
Complaining about a technology (tailwind) while not using its surrounding ecosystem is not really a good way to build things.
How to do it:
- encapsulte/extract react/jsx components - for readability, so you do not have a wall off endless meaningless divs. Examples: Article, ArticleHeader, ArticleContent, ArticleSummary, etc...
- use cva https://github.com/joe-bell/cva to style generic ui components (like buttons) to archive same grouping as in semantic css
- use https://github.com/dcastil/tailwind-merge to merge/overwrite tailwind classes (like in css)
- result: separated react/jsx components with only a few lines of tailwind classes - are very readable and easily maintainable