🍿 Is Facebook's new Styling Library a Tailwind Killer?

Hey friend,

Today's snack will explore a new Styling library that could be Tailwind CSS's next big contender!

✨ StyleX ✨

We'll break down the differences, the problems it tackles, and how it stacks up against Tailwind!

Would you prefer to watch a video on the same topic instead? If so, check it out here πŸ‘‡

video preview​

Alrighty, today's topic is on Facebook's new Library, which was open-sourced recently called StyleX.

🍿 Our Weekly Snack: StyleX vs Tailwind

According to StyleX docs,

Why was StyleX/Tailwind created? πŸ€”

Stylex aims to empower developers to build UI components that have some default styling baked in but also allow for easy customization.

On the other hand, Tailwind CSS is a utility-first CSS framework. It provides a lot of helper utilities out of the box, such as:

  • Common CSS properties bundled into utilities
  • Configurable themes and more.

So, while Stylex is focused on customization, Tailwind aims to make styling faster and easier through its design system utilities.

🚨 In summary, both are solving a different problem.

Styling Elements πŸ’…

With Stylex, you style elements using the style.create() function and then apply those styles using stylex.props.

You can override props by passing another parameter to stylex.props function. To override styles, you can merge style objects.

With Tailwind CSS, styling uses utility classes. For example, text-lg means font size of text alongside line height is applied, aka a combo of classes. Plus, a design system of colors, line height, spacing, etc. comes out of the box.

TypeScript support πŸ”‘

One major advantage of Stylex is its TypeScript support. We can restrict styling properties.

For example,

The Verdict πŸ’–

There are good reasons to use either Tailwind CSS or Stylex:

Consider Tailwind CSS if:

  • You want an entire design system out of the box
  • You prefer mobile-first styles
  • You are not using TypeScript

Consider Stylex if:

  • You want maximum style flexibility and have your design system
  • You need configurable themes
  • Type safety is important

Both tools have their merits depending on your needs. Over time, Stylex may gain more adoption from its backing by Facebook and style override capabilities. Plus, many dislike how ugly the styles look with Tailwind, so StyleX might be the choice.

But Tailwind CSS still remains a great utility-first CSS framework and will continue to be used in a lot of my projects as I can move faster.

🀫 Latest Frontend News

There have been new updates to React docs. Here is a quick summary (more docs):

  • "𝚞𝚜𝚎 πšœπšŽπš›πšŸπšŽπš›" & "𝚞𝚜𝚎 πšŒπš•πš’πšŽπš—πš" directives have more documentation and explanations alongside some of the hooks 𝚞𝚜𝚎(), πšžπšœπšŽπ™΅πš˜πš›πš–πš‚πšπšŠπšπšŽ(), πšžπšœπšŽπ™΅πš˜πš›πš–πš‚πšπšŠπšπšžπšœ(), πšžπšœπšŽπ™Ύπš™πšπš’πš–πš’πšœπšπš’πšŒ() .
  • New πšŒπšŠπšŒπš‘πšŽ() function lets you cache the result of a data fetch or computation

​You can read all about them here ↗️​

You can generate UI in seconds with text or images with
​Vercel's v0.dev ↗️​

Writing SQL queries has never been easier, thanks to Supabase πŸ‘ Checkout their SQL editor powered by AI ↗️​

You can use React Server Components in Storybook by upgrading to Storybook 8.0 alpha. You can learn how it works here ↗️​

There is now a new JS API dropped ↗️ in Webkit Nightly for the existence of an element.

​Tailwind CSS v3.4 is out ↗️, wohoo! Here are a few exciting updates from this release IMO,

  • Dynamic viewport units: dvh, lvh, and svh are designed to accommodate the disappearing menu bars in chrome
  • `:has()` support: Style parent elements based on their children.
  • New `size-*` utilities: Set width and height simultaneously!

v3 of date-fns is finally out πŸŽ‰ Check out the summary here ↗️

Docusaurus crossed 50,000 stars 🀩 ⭐️ and 3.0 is out ↗️. Docusaurus lets you build documentation websites, blogs, marketing pages, and more. And it enables you to write great content faster.

Finally, yay, more testing docs ↗️ are added for Next.js

πŸ’ͺ Pick a Course Topic

Please help me assess what course I should create next by clicking on one of the links below.

It will be completely free on my YouTube channel ↗️ πŸŽ₯


πŸ’– Weekly Youtube Videos

Check it out and subscribe to my channel ↗️ for more Frontend, Leadership and Career Development content. πŸ’ͺ

Is Facebook StyleX a Tailwind killer? πŸ€”

video preview​

Avoid these server action mistakes at all costs πŸš€

video preview​


🧰 The Frontend Developers Toolbox

What do you think of today's Newsletter? Simply click on one of the links below.

​πŸ”₯ 😐 πŸ‘Žβ€‹


I hope you have a great day!


A Frontend Newsletter that you'll love! πŸ’–