cva
clb
| cva | clb | |
|---|---|---|
| 16 | 2 | |
| 5,239 | 150 | |
| - | - | |
| 7.2 | 3.9 | |
| 12 days ago | about 1 year ago | |
| TypeScript | JavaScript | |
| Apache License 2.0 | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
cva
-
Use postcss-cva to generate cva method
cva.style
-
Tailwind vs. Semantic CSS
* use cva https://github.com/joe-bell/cva to style generic ui components (like buttons) to archive same grouping as in semantic css
- 5 React Libraries to Level Up your Projects in 2023
-
How do you design Button in React js?
Highly recommended with this: https://github.com/joe-bell/cva
-
What am I missing out about Tailwind?
Yes, and a library like https://github.com/joe-bell/cva makes this a breeze. See https://cva.style/docs/getting-started#your-first-component for an example
-
Building a prop-based, type-safe Tailwind with vanilla-extract
There is also class variance authoriy
- Konsta UI – Mobile UI Components Built with TailwindCSS
- which way do you prefer for styling ?
-
Conditional styling reusable components
https://github.com/joe-bell/cva is great for this
-
Introducing DecaUI
Also have you heard of class variance authority? https://github.com/joe-bell/cva; personally looked into stitches & vanilla-extract but i'm preferring the simplicity of this package the most.
clb
-
Don't use Tailwind for your Design System
You can even go further and use https://github.com/crswll/clb and create your own rebassjs.
-
Hyclass - Small (~162b gzip) utility to create style variants
It is a lot like that! I just found this one as well: https://github.com/crswll/clb. The main difference is Hyclass just parses the options from the provided className string, while those you pass in the object options themselves. Those are definitely more powerful for things like toggling a style on and off, but I think Hyclass is more succinct and readable for simply aliasing away messy classes.
What are some alternatives?
react-cva - Class Variance Authority helper for react
eslint-plugin-tailwindcss - ESLint plugin for Tailwind CSS usage
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript
tailwindcss-classnames - Functional typed classnames for TailwindCSS
stylemapper - Flexible utility to create styled and type-safe React components
konsta - Mobile UI components made with Tailwind CSS
stitches - [Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
Tailwind CSS - A utility-first CSS framework for rapid UI development.
linaria - Zero-runtime CSS in JS library
draggable - The JavaScript Drag & Drop library your grandparents warned you about.
daisyui - 🌼 🌼 🌼 🌼 🌼 The most popular, free and open-source Tailwind CSS component library