Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →
Top 23 TypeScript CSS Projects
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
novu
GitOps based Notification Infrastructure as Code. Embeddable Notification Center, E-mail, Push and Slack Integrations.
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
shoelace-css
A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
-
-
-
-
-
-
react-nodegui
Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀
-
-
-
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
Lastly, Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.
I am using iTerm2 on my macOS. Other available options are Hyper and VS Code’s inbuilt terminal, which I sometimes use for quick tests. You can open a terminal in VS Code by using the keyboard shortcut CMD + J or CTRL + J on Windows, or View → Terminal.
CSS-in-JS is a styling technique wherein CSS is composed using JavaScript instead of defined in external files. This method allows CSS to be scoped locally to components rather than globally, reducing the probability of style conflicts. Utilizing JavaScript also enables dynamic styling easily aligned with the component's state or props. Libraries like Styled Components and Emotion are popular choices in the React ecosystem for adopting this method.
Project mention: Open-source notification infrastructure for developers | news.ycombinator.com | 2024-05-06
the plugins in the official PostCSS website were old like IE6 or the marquee tag, and
https://github.com/firebase/firebase-ios-sdk/issues/6115
https://github.com/material-components/material-components-w...
Two examples that come to mind but there are plenty
Well if you want to check out the project you have here: 🌐 Docs website 📦 Github repo
HTMX gets all the hype right now, but there are other tools in the same vain, my favorite being Unpoly (https://unpoly.com). Together with Shoelace (https://shoelace.style) you get nice GUIs real fast, without the burden of complicated dependency management and build steps. Also, you don't have to write a lot of JS, just what is needed for small enhancements, as it was meant to be. Some might say the main drawback is the tight coupling to your backend. In my case, this is also the main benefit as it integrates perfectly with the backend framework (Django).
Create badass, fluid and smooth transitions between your website's pages (https://barba.js.org) by Thierry Michel, Xavier Foucrier, Luigi De Rosa This one is really good - just the minimum API to make these transitions so good.
Project mention: How we improved page load speed for Next.js ecommerce website by 1.5 times | dev.to | 2023-11-07The code duplication occurred due to disabling the default code splitting algorithm in Next.js. Previous developers used this approach to make Linaria work, which is designed to improve productivity. However, disabling code splitting led to a decrease in performance.
View on GitHub
As a starting point, Tailwind used to use PurgeCSS [0] but I'm not sure what they use now.
[0] https://purgecss.com
Visit site: https://transform.tools Github link: https://github.com/ritz078/transform
cva.style
Fontsource[0] is also an easy way to self-host variable fonts via NPM packages.
[0] https://fontsource.org/?variable=true
Emmet is a content/code assist tool to write code faster and more efficiently. It comes standard with VS Code so there is no need for any plugin. The concept is simple: you start typing an Emmet abbreviation, press TAB or 'ENTER', and a full Emmet snippet for that abbreviation will come out.
We're locking on this specific version of Tailwind CSS to prevent this bug — it should be addressed in NativeWind v4, but more on that later.
So the library I use is tailwind-merge, which is a class that eliminates conflicts between classes when using Tailwind. So I created the following utility function.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
TypeScript CSS related posts
-
E-commerce checkout components built with Tailwind CSS and Flowbite
-
How and why do we bundle zx?
-
Preline UI + Gowebly CLI = ❤️
-
Customer service pages for e-commerce built with Tailwind CSS
-
Show HN: Tailwind Nested VSCode Extension
-
🤯 Keep Up With these 50 Articles
-
Here are the 10 projects I am contributing to over the next 6 months. Share yours
-
A note from our sponsor - InfluxDB
www.influxdata.com | 8 May 2024
Index
What are some of the best open-source CSS projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Tailwind CSS | 78,568 |
| 2 | hyperterm | 42,688 |
| 3 | styled-components | 40,103 |
| 4 | novu | 32,993 |
| 5 | PostCSS | 28,210 |
| 6 | Material Components Web | 17,080 |
| 7 | omi | 12,932 |
| 8 | shoelace-css | 12,057 |
| 9 | barba | 11,441 |
| 10 | linaria | 11,197 |
| 11 | satori | 10,178 |
| 12 | purgecss | 7,672 |
| 13 | transform | 7,272 |
| 14 | windicss | 6,507 |
| 15 | react-nodegui | 6,171 |
| 16 | eui | 6,043 |
| 17 | modern-normalize | 5,762 |
| 18 | cva | 5,239 |
| 19 | panda | 4,726 |
| 20 | fontsource | 4,587 |
| 21 | emmet | 4,435 |
| 22 | nativewind | 4,261 |
| 23 | tailwind-merge | 4,037 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com