Tailwind vs. StyleX: Meta’s View on CSS-in-JS Maintainability

Tailwind has recently been in the news because it struggles to remain available in the age of AI. However, it’s not the only” CSS-in-JS” option in a race for developers ‘ attention. Just Meta has been promoting its open supply, React-based design project, StyleX. It’s not a model, like Tailwind; Meta refers to it as both a JavaScript collection and a” system” in general. However, StyleX offers an additional option to directly using CSS ( Cascading Style Sheets ) to the style sheet language.

In toward the end of last year, Meta’s called StyleX a” design program for large-scale software”. Liu is a key part of the Meta StyleX initiative and a Respond components software engineer. She mentions in her blog article that StyleX has evolved from being” the standard style program across external businesses like Figma and Snowflake,” as well as Facebook, Instagram, WhatsApp, Messenger, and Fibers.

A quick word about CSS-in-JS: These are options in which developers establish type using JavaScript, instead than CSS. Why is there a need for Javascript-based design techniques when CSS itself is becoming ever more complex — Google’s listed 22 fresh CSS attributes in Chrome last year?

The solution, at least for Meta, is: range and script manageability.

The Challenge of Styling at Scale

Liu and her coworker Pascal Hartig had a discussion about StyleX this week on the Meta Tech audio. She noted that the site of Facebook has” dozens of components”- including, without a doubt, a lot of styling components- and that it may deal with “hundreds of millions of users” every day. She explained that this kind of complexity and magnitude demanded a better way to control style.

” We also need to consider what’s sustainable from the perspective of developers,” she said. Being able to have such a huge code base and make it so that when someone from the ads group creates a part, they declare a switch course it, and then, oh, someone from Instagram creates a button class as well… and]so] we need a program … to kind of make it sustainable”.

The conclusion is that writing CSS code alone is insufficient for a sizable site like Facebook .com, as well as when it integrates with other applications like Instagram or Threads. The issue with CSS is that it is international, and if, as Liu said, someone from the Meta ads group modifies a button course in CSS, it might accidentally conflict with or supersede an Instagram button class.

In her blog post, Liu explained the problems with using direct CSS before StyleX ( and a precursor named ax ) came on:

According to the author,” serving CSS on such a scale caused incidents across bundles, issues with managing dependencies between stylesheets, and difficulties with reconciling competing rules, which usually sparked precision wars.”

How Do StyleX and Tailwind Compare?

So how does StyleX job? You are writing in JavaScript script rather than CSS, as noted above because it is a JavaScript collection. StyleX has been optimized for Relate because this is Meta, but Meta insists that it is framework-agnostic in a Question.

” StyleX is a CSS-in-JS solution, not a CSS-in-React solution. Although StyleX was created specifically for Communicate today, it can be used with any JavaScript framework that enables authoring markup.

StyleX is a compiler that generates a stable stylesheet and extracts styles at create time.
— Melissa Liu, Core StyleX designer at Meta

Liu stated in her blog post that “at its base, StyleX is a compiler that extracts models at create period and generates a stable stylesheet.” The result is CSS, but it is generated by JavaScript, and the process is performed during build time.

Tailwind is also a CSS-in-JS solution, and there are some similarities to StyleX. The HTML file can be made into “utility classes” inside of Tailwind, which are converted into static CSS files at build. The syntax is largely the same as that of StyleX, where Tailwind uses its own special classNames.

Mainly because of its unique syntax, maintainability has long been a contentious issue with Tailwind. In , I wrote that many developers detest Tailwind’s ugly markup, which makes the codebase more difficult to maintain.

On the Meta Tech Podcast, Liu only briefly mentioned Tailwind, but she appears to have the same concerns about maintainability. She acknowledged that developers love how quick it is to work with, but adds that “you lose out on maintainability with systems like Tailwind”.

While Tailwind is very much CSS-in-JS in terms of syntax, it’s not very good at being CSS-in-JS.
— Naman Goel, a Meta developer for Core StyleX

Others in the StyleX team are more critical. , one of the co-creators of StyleX ( and still a core developer ), claimed that Tailwind is “bad at being CSS-in-JS” due to its syntax in a post posted on his personal blog in September.

The className abstraction is great for quickly prototyping styles, but it disintegrates outside of typical use-cases. Writing CSS keyframes, view transitions, anchor positioning and anything out of the ordinary means reaching for an actual CSS file”.

Of course, advocates for web standards would agree that returning to the source code, CSS, is not harmful. However, Goel’s point is that JavaScript can apparently be used to address all of your styling requirements with StyleX.

The Rise of Atomic CSS

Both StyleX and Tailwind are examples of what has come to be known as “” styling, as Goel points out in . In contrast to the documentation for yet another CSS-in-JS solution, known as , is” a method of reducing the total number of defined rules by creating a single rule ( and in turn, a unique class name ) for each declaration, enabling large style re-use.”

” At the heart of StyleX is its static compilation into atomic CSS”.
— Liu

For StyleX, atomic CSS is a significant component of its solution. Per Liu’s blog post:

StyleX’s static compilation into atomic CSS is at its core. CSS size declines as the application grows because styles are converted to classes that have a single style declaration for reuse across a codebase.

In his post about atomic CSS, Goel points out that there are various ways” to bundle and serve atomic CSS”. This, however, seems to only apply to websites or applications with a certain, very limited scale. Even Goel admits that a single CSS file is typically the best option:

” Having a single CSS bundle for your entire web app is almost always a decent solution. If Facebook .com can get away with it, it’s probably going to be quick enough.

What Will StyleX Do Next?

At the end of 2025, StyleX launched a new website. A blog post that was included with it that was credited to both Goel and Liu. They claimed that StyleX’s compatibility with React Server components was” shown by the new website’s lightweight React framework, Waku, and React Server components.” ( a couple of years ago, soon after it came out.)

In addition to this, the pair stated that StyleX will receive “better ergonomics, new feature work, and developer tooling” in 2026.

Particularly if you’re deeply embedded in the React ecosystem, StyleX is a CSS-in-JS system to keep an eye on. But unless you’re running a website or app the scale of Facebook .com, you’re probably better off sticking with Tailwind or ( even better ) dealing directly with the CSS language.