Why styled-system is so powerful

Definition of problem

Last week, while working on a personal project, I wanted to use Tailwind CSS to enhance the design of my components, which were built with styled-components. Tailwind CSS is popular for its user-friendly design classes that make web development more efficient. However, I ran into a problem. Styled-components, the tool I used for creating my component library, didn’t work well with Tailwind CSS.

Here’s why: styled-components applies styles directly to elements (inline styles), while Tailwind CSS applies styles through classes. This means you can’t easily use Tailwind’s classes to override styles created with styled-components.

Additionally, when you want to make something customizable with styled-components, you often have to define each property individually, which can be something will make you tired in long term.

I bet many of us have encountered similar codebases in various projects! :)

Most well-known solutions

First, let’s list the pros and cons of the two most well-known approaches: Tailwind and Styled-Components. Then, I will introduce you to an alternative approach that is easier to use while still maintaining organization.

Pros of Tailwind CSS:

1. Rapid Development: Tailwind’s utility-first approach makes it quicker to style components directly in your markup, speeding up the development process.
2. Customizable: It offers deep customization options, allowing you to tailor the framework to fit your project’s specific needs.

Cons of Tailwind CSS:

1. Verbose HTML: Your HTML can become cluttered with many class names, making it harder to read and maintain.
2. Over-reliance on Utilities: There’s a risk of becoming too reliant on utility classes, which can lead to challenges in implementing more complex, custom designs that require traditional CSS.
3. Limited Flexibility with Other Libraries: Tailwind’s class-level operation can limit its compatibility and flexibility when integrating with other libraries or frameworks that rely on different styling approaches.

Our second option is styled-components. Even though it’s more clean approach, you should spend important amount of time to make it custom and to gain typescript support.

Pros of Styled Components:

1. Component-Level Styling: Allows for individual styling of components, making it easier to reuse and maintain them.
2. Dynamic Styling: Facilitates the application of dynamic styles using props or themes, directly integrating with JavaScript logic.
3. CSS in JS: Keeps styling closely associated with components, aiding in organization and minimizing styling conflicts.

Cons of Styled Components:

1. Performance Overhead: The dynamic styling approach may lead to slight performance drops.
2. TypeScript Support: While it offers TypeScript support, integrating styled-components with TypeScript can sometimes be complex and require additional typings.
3. Cluttered JavaScript: Embedding CSS within JavaScript can clutter components, particularly in larger projects, making the code harder to read.

And here is why styled-system is so powerful
This tool can speed up your component building process and allows for easy style changes without updating your component library.

We did not define any types or properties ourselves and thanks to styled system for we can still update any property we want.

In this article, I discussed a problem I encountered and shared my alternative solution with you! I hope you found it useful!

Your insights and feedback are invaluable to me, thank you in advance for engaging with my content.

Feel free to contact me on LinkedIn if you have any questions or require assistance.

Linkedin

Github