🍿 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 👇

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? 🤔

Avoid these server action mistakes at all costs 🚀

🧰 The Frontend Developers Toolbox

How headers() function work in Next.js, Lee Rob has created some visuals you will love ↗️
Staying focused as a Frontend Developer is getting increasingly difficult so check out the Raycast app ↗️ where it will let you control your tools with a few keystrokes.

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