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
TailwindCSS — Needs no introduction.
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.
When styled-components hit the CSS scene, it caught many developers' eyes with its core concept: component-level styling. With this approach, your styles are defined directly within your React components using template literals and tagged functions. It’s a straightforward technique that keeps styles tightly coupled with their corresponding components, making your code easier to find, understand, and modify.
import { Body, Column, Container, Head, Heading, Hr, Html, Link, Preview, Section, Text, Row, } from "@react-email/components"; import * as React from "react"; const EmailTemplate = () => ( Hello WorldPreview> Hello WorldHeading> Column> Row> Section> Hey Emil,Text> CoolText> Section> Container> You're receiving this email because your subscribed to Newsletter App Text>
Newsletter Appstrong>, ©{" "} NovuLink> Text> Section> Body> Html> ); export default EmailTemplate; const main = { backgroundColor: "#f3f3f5", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", }; const headerContent = { padding: "20px 30px 15px" }; const headerContentTitle = { color: "#fff", fontSize: "27px", fontWeight: "bold", lineHeight: "27px", }; const paragraph = { fontSize: "15px", lineHeight: "21px", color: "#3c3f44", }; const divider = { margin: "30px 0", }; const container = { width: "680px", maxWidth: "100%", margin: "0 auto", backgroundColor: "#ffffff", }; const footer = { width: "680px", maxWidth: "100%", margin: "32px auto 0 auto", padding: "0 30px", }; const content = { padding: "30px 30px 40px 30px", }; const header = { borderRadius: "5px 5px 0 0", display: "flex", flexDireciont: "column", backgroundColor: "#2b2d6e", }; const footerDivider = { ...divider, borderColor: "#d6d8db", }; const footerText = { fontSize: "12px", lineHeight: "15px", color: "#9199a1", margin: "0", }; const footerLink = { display: "inline-block", color: "#9199a1", textDecoration: "underline", fontSize: "12px", marginRight: "10px", marginBottom: "0", marginTop: "8px", }; const footerAddress = { margin: "4px 0", fontSize: "12px", lineHeight: "15px", color: "#9199a1", };
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
-
I wrote a new blog using Next.js App router
-
Top 9 CSS and JavaScript Tooltip Libraries
-
Darling, I converted our perfectly fine SPA application into SSR: Part 2
-
View Wikipedia in Dark Mode with?withgadget=dark-mode
-
E-commerce checkout components built with Tailwind CSS and Flowbite
-
How and why do we bundle zx?
-
Preline UI + Gowebly CLI = ❤️
-
A note from our sponsor - InfluxDB
www.influxdata.com | 17 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,889 |
| 2 | hyperterm | 42,718 |
| 3 | styled-components | 40,111 |
| 4 | novu | 33,044 |
| 5 | PostCSS | 28,222 |
| 6 | Material Components Web | 17,084 |
| 7 | omi | 12,931 |
| 8 | shoelace-css | 12,093 |
| 9 | barba | 11,448 |
| 10 | linaria | 11,207 |
| 11 | satori | 10,204 |
| 12 | purgecss | 7,678 |
| 13 | transform | 7,322 |
| 14 | windicss | 6,507 |
| 15 | react-nodegui | 6,171 |
| 16 | eui | 6,044 |
| 17 | modern-normalize | 5,780 |
| 18 | cva | 5,277 |
| 19 | panda | 4,732 |
| 20 | fontsource | 4,608 |
| 21 | emmet | 4,435 |
| 22 | nativewind | 4,290 |
| 23 | tailwind-merge | 4,090 |
Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com