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.
According to StyleX docs,
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:
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.
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.
One major advantage of Stylex is its TypeScript support. We can restrict styling properties.
There are good reasons to use either Tailwind CSS or Stylex:
Consider Tailwind CSS if:
Consider Stylex if:
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.
There have been new updates to React docs. Here is a quick summary (more docs):
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,
svh are designed to accommodate the disappearing menu bars in chrome
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
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 ↗️ 🎥
Check it out and subscribe to my channel ↗️ for more Frontend, Leadership and Career Development content. 💪
What do you think of today's Newsletter? Simply click on one of the links below.
I hope you have a great day!