clsx
vite
![SurveyJS Logo](https://cdn-b.libhunt.com/images/promo-campaign-images/000/000/030/main.png?1674177924)
clsx | vite | |
---|---|---|
19 | 808 | |
7,649 | 65,591 | |
- | 1.3% | |
6.2 | 9.8 | |
6 days ago | 2 days ago | |
JavaScript | TypeScript | |
MIT License | MIT License |
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.
clsx
-
“cn” utility function in shadcn-ui/ui:
Also serves as a faster & smaller drop-in replacement for the classnames module.
-
Tailwind CSS for frontend teams: From settings to rules
To make class-based Tailwind easy to use, we used the clsx library to help manipulate class names. However, using clsx and Tailwind together often doesn't work as intended.
-
Styling React 2023 edition
clsx is a tiny utility for constructing className strings conditionally, I use it in conjunction with tailwind-merge which merges Tailwind CSS classes without style conflicts.
-
What are the most common ways to do conditional class names in React?
I am familiar with the library clsx although I have never used it personally. I don't often have the need for conditional classes and when I do it's usually an inline ternary expression in the style or className prop. Is that bad/good? Are there any other popular libraries other than clsx, or anti-patterns I should be aware of when doing conditional classes in React? Thanks fam
-
Tailwind styles not working when passed as a variable unless previously hardcoded
I use CLSX for all tailwind dynamic styles. Super simple, lightweight and now is almost part of every project I build haha
-
Top packages for React Development
Clsx
-
Consuming a Rails API with a NextJs client
https://github.com/lukeed/clsx “A tiny (228B) utility for constructing className strings conditionally.”
-
Why Tailwindcss over styled-components?
Then use something like clsx
-
What's the proper way to write Tailwind with React?
For conditionally applying or removing classes, you should take a look at clsx.
-
Dynamic TailwindCSS in React components
clsx has better performance over the classnames package. That’s why it was created. Take a look at their benchmarks in the repo.
vite
-
A tale about migrating a 200 entries Gatsby blog untouched for 3 years to Astro
Over the years, the blog was migrated from WordPress to Gatsby for blazing fast performance and nice features. Blazing being about a medium 60 lighthouse score for a mostly static site, not very blazing. Sadly, when writing new articles, a slightly annoying 5 minutes boot time was required before any change could be shown. It was about 2 years after we started using Vitejs in production for most SPA clients, and the slowness was terrible.
-
Type-Safe Env Vars in Remix - A modern approach with ArkType
The original post had a little bit of server code in the client bundle. Now that Remix uses Vite, it was easy to spot that.
-
Using Vite for React Applications
Vite
-
Create A YouTube Homepage Clone in Tailwind CSS and ReactJS
Initialize the Project Use Vite to create a new React app with this command:
- Migrando do CRA para Vite
-
Why and How to Migrate Your React App from CRA to Vite
In Vite, legacy browsers can be supported via the official @vitejs/plugin-legacy plugin, it also provides Browselist like configuration.
-
Switching to Vite from React-Scripts
I have a silly react project that I’m working on that I made using create-react-app. By default, these kinds of projects build and run using react-scripts which uses webpack under the hood for building projects. Vite is generally known to be faster than Webpack ⚡ so I was curious about how to swap them.
-
Converting couple thousands Js/Ts files that contains JSX content to jsx extension
Without a transpiler in the process, the jsx left as is: https://github.com/vitejs/vite/discussions/3448
-
Series - Converting Large Codebase Project to Vite
We wanted to change the bundler to vite for two main reasons:
-
How to Start & Setup a React project in 2024 (7 Different Ways Based on Use Cases)
You can see all create-vite templates for other libraries. You can also learn more about vite in its documentation website.
What are some alternatives?
classnames - A simple javascript utility for conditionally joining classNames together
Next.js - The React Framework
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
parcel - The zero configuration build tool for the web. 📦🚀
Tailwind CSS - A utility-first CSS framework for rapid UI development.
esbuild - An extremely fast bundler for the web
Vue.js - This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
swc - Rust-based platform for the Web
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
astro - The web framework for content-driven websites. ⭐️ Star to support our work!
tailwind-merge - Merge Tailwind CSS classes without style conflicts
Rollup - Next-generation ES module bundler
![SurveyJS Logo](https://cdn-b.libhunt.com/images/promo-campaign-images/000/000/030/main.png?1674177924)