TypeScript PostCSS

Open-source TypeScript projects categorized as PostCSS

Top 23 TypeScript PostCSS Projects

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • Project mention: Clonador y Fusionador de Playlists para Spotify | dev.to | 2024-06-18
  • 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.

    SurveyJS logo
  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

  • Project mention: 6 CSS tools for more efficient and flexible CSS handling | dev.to | 2024-05-16

    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.

  • PostCSS

    Transforming styles with JS plugins

  • Project mention: BEM Modifiers in Pure CSS Nesting | dev.to | 2024-06-17

    Later on, after my training, almost all of my work projects involved some preprocessor. It was during these experiences that I developed my strong dislike for preprocessors. In my personal projects, however, I never used preprocessors and wrote everything in pure CSS, adding precise enhancements through plugins for my .css bundler. For example, in the past, when I was bundling my .css files using PostCSS, I used a simple plugin called postcss-import to bundle all .css files into one final file (such as in this blog. Here is one of the first commits in this repository). I rarely used any additional plugins for CSS.

  • linaria

    Zero-runtime CSS in JS library

  • Project mention: Linaria: Zero-Runtime CSS in JavaScript | news.ycombinator.com | 2024-06-16
  • purgecss

    Remove unused CSS

  • Project mention: Optimize CSS with SAT Solving | news.ycombinator.com | 2024-03-17

    As a starting point, Tailwind used to use PurgeCSS [0] but I'm not sure what they use now.

    [0] https://purgecss.com

  • panda

    🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️

  • Project mention: Show HN: Tailwind Nested VSCode Extension | news.ycombinator.com | 2024-04-22
  • styletron

    :zap: Toolkit for component-oriented styling

  • 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.

    InfluxDB logo
  • jsxstyle

    Inline style system for JSX

  • Project mention: Panda CSS: build time and type-safe CSS-in-JS | news.ycombinator.com | 2024-02-05

    Works in both React and Preact. It's designed to support generating styles at build time, but I've never bothered. For the sorts of things I work on, being able to quickly bang out a component is more important than golfing the bundle size or maintaining a design system.

    jsxstyle feels like I can sculpt in code. It's really satisfying to hammer out some props and see a component come to life, especially when you've got hot module replacement working.

    Based on a quick perusal of linked page, Panda seems like perhaps a more mature version of jsxstyle, but also more fidgety. As an army of one, I'm happy to optimize for iteration speed, but if I needed to maintain a system, maybe I'd consider switching to Panda.

    https://www.npmjs.com/package/jsxstyle

  • lume

    🔥 Static site generator for Deno 🦕

  • Project mention: Node.js vs. Deno vs. Bun: JavaScript runtime comparison | dev.to | 2023-09-06

    Deno also has a tooling ecosystem around it to enable developers to jumpstart their projects. Fresh is a web framework built for Deno and Lume is their static site generator.

  • typescript-plugin-css-modules

    A TypeScript language service plugin providing support for CSS Modules.

  • Project mention: WebStorm doesn't see TypeScript errors | /r/typescript | 2023-10-25

    Wild guess- does your project use a recent version of typescript-plugin-css-modules? If so, there’s a known issue that breaks WebStorm typecheck

  • react-daisyui

    daisyUI components built with React 🌼

  • Project mention: Light UI component library but as good as MUI (or atleast close to it)? | /r/reactjs | 2023-07-03

    do you mean react.daisyui.com? it only have 6k~ npm downloads that's why I didn't actually think anybody actually mean it when they say that they are using daisyUI

  • browser-extension

    Browser Extension Template with ESbuild builds, support for React, Preact, Typescript, Tailwind, Manifest V3/V2 support and multi browser build including Chrome, Firefox, Safari, Edge, Brave. (by Debdut)

  • nuxt-purgecss

    Drop superfluous CSS! A neat PurgeCSS wrapper for Nuxt.js

  • nextbase-nextjs-supabase-starter

    🚀⚡️ Free Boilerplate and Starter kit for Next.js 14+, Supabase, Tailwind CSS 3.2 and TypeScript. 🚀 Next.js 🔥 Supabase 💻 TypeScript 💚 ESLint 🎨 Prettier 🐶 Husky 🧹 Lint-Staged 🧪 Jest 🧪 Testing Library 🕹️ Playwright ✍️ Commitizen 💬 Commitlint 💻 VSCode 🌪️ Vercel 🎨 PostCSS 🍃 Tailwind CSS ⚛️ React Query

  • packages

    💎 Monorepository for Stylify packages. Stylify uses CSS-like selectors to generate Extremely optimized utility-first CSS dynamically based on what you write 💎. (by stylify)

  • vite-ts-tailwind-starter

    Opinionated Vite + Vue 3 + TypeScript + Tailwind CSS starter template w/ tests and CI.

  • mantine-analytics-dashboard

    A free, open source, Next 14, React 18 admin dashboard template created using Mantine 7

  • Project mention: How I Built an Open-Source Admin Dashboard Template with Mantine and Next.js | dev.to | 2024-04-03

    import { TextInput, Select } from '@mantine/core'; // Example usage ; ; Enter fullscreen mode Exit fullscreen mode Maps: React Simple Maps provides maps that are valuable for visualizing geospatial data. You can integrate interactive maps into your dashboard to represent data points geographically. import {ComposableMap, Geographies, Geography, Marker} from "react-simple-maps"; // Example usage {...} {... return ( ); })} Enter fullscreen mode Exit fullscreen mode By incorporating these core components, our template accelerates the development of admin dashboards. These components are designed to work seamlessly together, providing a cohesive user experience. You can effortlessly create complex data visualizations, interactive tables, intuitive forms, and interactive maps — essential elements that transform raw data into meaningful insights. Deploying the Template to a Live Environment Deploying our admin dashboard template to a live environment is a straightforward process. We recommend utilizing popular hosting platforms like Vercel, Netlify, or Firebase Hosting. These platforms offer seamless integration with Next.js and allow you to deploy with a few simple steps: Install Required Dependencies: Ensure you have the necessary dependencies specified in the package.json file. Build the Project: Generate a production build of your Next.js application using the command: npm run build. Select Hosting Platform: Choose your preferred hosting platform (e.g., Vercel). Connect Repository: Link your template’s GitHub repository to the hosting platform. Configure Deployment Settings: Configure deployment settings, such as branch selection and build commands. Deploy: Trigger the deployment process. The hosting platform will automatically build and deploy your admin dashboard template. Real-World Use Cases The versatility of our admin dashboard template knows no bounds. It caters to a myriad of real-world use cases, each tailored to specific industries and applications: E-Commerce Management: The template can be employed to manage product listings, order processing, and inventory tracking for online stores. Data Analytics: With its data visualization components, the template can serve as a dashboard for analyzing metrics, trends, and insights. Project Management: The template’s customizable components facilitate the creation of project management tools for tracking tasks, deadlines, and team collaboration. SaaS Applications: As the foundation of a Software as a Service (SaaS) application, the template streamlines user management, subscription tracking, and data presentation. Content Management: It can also function as a content management system dashboard, offering tools to manage articles, media, and user-generated content. Live Demo For a hands-on experience, explore the live demo of our admin dashboard template: Live demo — https://mantine-analytics-dashboard.netlify.app/ Witness the template’s adaptability, responsiveness, and functionality firsthand. Feel free to interact with its components, navigate through its sections, and envisage how it could seamlessly integrate into your projects. Contributing and Support I welcome all developers and enthusiasts to contribute to the growth of our open-source admin dashboard template. Contributing is a collaborative process that empowers us to collectively enhance the template’s capabilities and quality. To get started: Fork the Repository: Fork the template’s GitHub repository to your own GitHub account. Clone the Fork: Clone the forked repository to your local machine using Git. Create a Branch: Create a new branch for your contributions to keep the main codebase intact. Implement Changes: Make your desired changes, add new components, or refine existing features. Commit and Push: Commit your changes to the new branch and push them to your GitHub fork. Submit a Pull Request: Submit a pull request from your forked repository to the main template repository. Your changes will be reviewed and potentially merged. Conclusion In summary, our Mantine and Next.js admin dashboard template offers a range of benefits that empower developers, designers, and entrepreneurs to create exceptional admin interfaces: Efficiency and Speed: The template expedites development by providing a pre-built foundation of components and features, allowing you to focus on customization and innovation. Consistency and Aesthetics: Mantine’s design-first approach and Next.js’s performance optimizations ensure a consistent and visually appealing user experience. Flexibility and Customization: The template’s modularity and theming options facilitate easy customization to align with your project’s unique branding and requirements. Rich Functionality: The integration of core components such as charts, tables, forms, and maps equips you with tools to tackle diverse dashboard functionalities. Invitation to Explore and Utilize The Mantine and Next.js admin dashboard template isn’t just an end; it’s a beginning — a starting point for your creative journey. Whether you’re a seasoned developer seeking a rapid launch or an enthusiast keen on learning modern development practices, this template is your canvas. Additional Resources GitHub repository — https://github.com/design-sparx/mantine-analytics-dashboard Mantine — https://mantine.dev/ Nextjs — https://nextjs.org/ Code documentation — https://mantine-analytics-dashboard-docs.netlify.app/

  • postcss-rtlcss

    PostCSS plugin to automatically build Cascading Style Sheets (CSS) with Left-To-Right (LTR) and Right-To-Left (RTL) rules using RTLCSS

  • nextsss

    Next.js static site starter including full setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, etc.

  • vite-plugin-inline-css-modules

    Write CSS modules without leaving your javascript!

  • backoffice-template

    Clean Architecture Sveltekit Appwrite template include admin area, auth, protected routes, it use ShadCN-Svelte as base component library, include authorization, designed to be easy to maintain and very scalable.

  • Project mention: Feedback on SvelteKit Appwrite Template TailwindCSS ShadCN-Svelte | /r/sveltejs | 2023-10-28
  • DHTMLX Widgets with Angular

    Using DHX widgets with Angular

  • css-modular-type

    A PostCSS and TailwindCSS plugin to generate modular type scales.

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
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 PostCSS discussion

Log in or Post with

TypeScript PostCSS related posts

  • 8+ Tailwind CSS Alert Examples [Open-Source & Free]

    1 project | dev.to | 18 Jun 2024
  • Navbar components built for e-commerce with Tailwind CSS and Flowbite

    1 project | dev.to | 18 Jun 2024
  • Linaria: Zero-Runtime CSS in JavaScript

    1 project | news.ycombinator.com | 16 Jun 2024
  • Tailwind CSS vs. Radix UI: Which One Should You Choose for Your Next Project?

    1 project | dev.to | 15 Jun 2024
  • Building a serverless connected BBQ as SaaS - Part 2 - User Creation

    1 project | dev.to | 13 Jun 2024
  • 4 Free Tailwind CSS Badge Components [Open-Source]

    1 project | dev.to | 6 Jun 2024
  • Styling your Dart Jaspr website with Tailwind CSS and DaisyUI

    4 projects | dev.to | 27 May 2024
  • A note from our sponsor - SaaSHub
    www.saashub.com | 21 Jun 2024
    SaaSHub helps you find the best software and product alternatives Learn more →

Index

What are some of the best open-source PostCSS projects in TypeScript? This list will help you:

Project Stars
1 Tailwind CSS 79,952
2 styled-components 40,215
3 PostCSS 28,286
4 linaria 11,309
5 purgecss 7,697
6 panda 4,834
7 styletron 3,320
8 jsxstyle 2,108
9 lume 1,734
10 typescript-plugin-css-modules 1,284
11 react-daisyui 874
12 browser-extension 658
13 nuxt-purgecss 469
14 nextbase-nextjs-supabase-starter 467
15 packages 421
16 vite-ts-tailwind-starter 405
17 mantine-analytics-dashboard 171
18 postcss-rtlcss 96
19 nextsss 86
20 vite-plugin-inline-css-modules 56
21 backoffice-template 46
22 DHTMLX Widgets with Angular 5
23 css-modular-type 0

Sponsored
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.
surveyjs.io