# StyleX

> Meta's type-safe, compile-time styling system for web applications

StyleX is an open-source CSS styling system developed by Meta that powers platforms like Facebook, Instagram, and Threads. It combines the developer ergonomics of CSS-in-JS with compile-time CSS extraction, ensuring zero runtime overhead and predictable style composition without specificity clashes. It includes built-in TypeScript support and an atomic CSS compiler.

Website: https://stylexjs.com/

## What it is for

- Manage scoped, conflict-free styles across large web applications
- Enforce static type checking on CSS properties and design system tokens
- Compile styles into optimized atomic CSS bundles with zero runtime cost

## Features

- Compile-time CSS extraction into atomic stylesheets
- Full TypeScript integration for type-safe CSS properties
- Deterministic style resolution that eliminates specificity issues
- Deterministic dynamic theming and token management
- Modular component-level styling using stylex.create and stylex.props

## Pricing

Open source. Free and open-source (MIT License)

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: yes
- Platforms: Code library, Web
- For: Frontend engineers and design system developers building scalable JavaScript and TypeScript applications
- Alternative to: Tailwind CSS, Styled Components, Emotion, Vanilla Extract
- Tags: css, css in js, typescript, meta, styling, frontend

## Why it was saved

- [@icodestuff.io, 19 December 2023](https://www.instagram.com/reel/C1CfN00A9YW/): Eliminates CSS specificity clashes and provides strict static type safety while keeping styles modular and compiling into optimized atomic CSS.

## Related

- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Osmo](https://xiry.app/resources/osmo): Resource vault and toolkit of animations, components, and transitions for Webflow and HTML (Website, Paid)
- [Anchoring DOM Labels to a 3D Globe with CSS Anchor Positioning](https://xiry.app/resources/anchoring-dom-labels-to-a-3d-globe-with-css-anchor-positioni): Declaratively anchor and toggle DOM markers on 3D scenes with CSS (Tip, Free)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [COBE](https://xiry.app/resources/cobe): Lightweight 5KB WebGL globe with CSS anchor positioning support (Web app, Open source)
- [CSS Card Parallax with Pointermove and Custom Properties](https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties): CSS recipe for interactive 3D card tilt and 2D layer parallax (Tip, Free)

Updated 3 October 2026. Page: https://xiry.app/resources/stylex

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.