Forem: Aditya Agarwal

Better Components with TailwindCSS

Aditya Agarwal — Sun, 12 Jan 2020 07:06:31 +0000

TailwindCSS is great for building reusable components of your design system. The component itself can be written in ReactJs or VueJs and we'll get the same benefit.

But How?

Today, I'll just talk about one reason and that is Encapsulation. When we write a component we want to allow some customizations but on the other hand, we also want to prevent full access to the internals of a component. That is to say we want to expose a public API and only allow customisation from that public API.

First I'll shed some light on why traditional styling doesn't provide Encapsulation.

ClassNames is a public API.

In React, a components public API is made with props and in Vue we have props + slots. But we are forgetting one thing. If a component uses CSS classes for styling then we are unknowingly providing another public API. Because all CSS classes are global, any consumer of the component can override the internal styles of a component.

Take a look at this example

function Button({ icon, size='normal', children, ...props }) {
  return (
    <button {...props} className={`btn btn-${size}`}>
      <span className="btn-icon">
        <Icon icon={icon} />
      </span>
      {children}
    </button>
  );
}

It's a simple Button component which can render text and an icon. There is a size prop as well with which user can render a normal button or a large buttton. It makes sense because we don't want user to render a button of any size. We want the size to be constrained. Also this way we can scale the icon according to size of button. If we give user the full control then they might forget increasing the size of icon while making a large button.

So we have two requirements-

User should only render a normal or large size button.
Everything inside button like font and icon should scale along with button size.

But is the current implementation really following the two requirements?
The answer is No.

Because user knows about the two classNames btn & btn-icon they can customise both the elements in any way they want. Assume user writes this CSS-

.btn {
  font-size: 100px;
  padding: 10px;
}

.btn-icon {
  font-size: 20px;
}

All of the hard work you did to keep the scale of icon and button in sync is now wasted. User has unregulated control, it's chaos.

To put it in short there are two problems with using classNames like this for components of a design system-

User has full control of the styling and you can't add constraints.
If you change the internal structure, user's applications can break.

I'm a lot more scared about the second problem. Because now the user relies on the internal structure of the component you can't modify the internals carefree. You cannot change the btn-icon class to something else. And that's just one thing. Imagine all the classes a component is made of. Once you publish the component you have tied yourself in a corner, you cannot modify anything you can just add new things. And when you just add new things your API surface becomes larger and more complex.

This xkcd comic is exactly what I'm talking about

Tailwind to the rescue

TailwindCSS provides a simple solution for this. Just don't use classes this way. If you don't have a catch-all btn class then users won't be able to override it.

A Button styled with TailwindCSS would look like this-

function Button({ icon, size='normal', children, ...props }) {
  return (
    <button {...props} className={`bg-green text-${size}`}>
      <span className={`bg-gray-600 text-${size}`}>
        <Icon icon={icon} />
      </span>
      {children}
    </button>
  );
}

What is important to notice is that the entire component is made of utility classes. These classes just do one small thing and each class might appear in multiple components. A user would not override bg-gray-600 because that would break all those components which use bg-gray-600 class. Earlier the user knew that btn-icon would just affect the icon inside Button component so they modified it carefree but now they can't.

Now you have the control on what things you want the user to give control of. User can't even change the color of button if you don't provide a prop for it.

Hope this article helped you understand one benefit of TailwindCSS. I'd be writing more about Tailwind and design systems in general so if you're interested in that give me a follow here or on Twitter.

Ideal boilerplate for reusable React components

Aditya Agarwal — Thu, 10 Jan 2019 17:20:28 +0000

Getting started with a functional React component is easy but when we are building reusable components we should keep somethings in mind.

We can render custom markup inside the component to make it more flexible.
We can add classes to the component for modifying the styling of the component.
We can set attributes of the element the container is wrapping. (e.g. aria attributes, data attributes);

To ensure that our React component can support all of them we should use the following code as boilerplate.

import React from 'react';

function ReusableComp({ className, children, ...props }) {
  const classList = ['componentClass1', 'componentClass2', className];

  const classNames = classList.join(' ');
  return <div className={classNames} {...props}>{children}</div>
}

First we destructure all the props we need in our component and then collect all the remaining props in props variable.

Then we merge the className prop with our own component's classes.

At last, we assign the className and spread the other props and render children inside the div.

We can then use it like this

<ReusableComp className='special-item' title='actions'>
  <div>
    <button>Do Something</button>
    <a href="/go-somewhere">Go</a>
  </div>
</ReusableComp>

PRO TIP: in our component to avoid hardcoding the div element as wrapper, we can implement as prop in the component like this.

import React from 'react';

function ReusableComp({ className, children, as: Element, ...props }) {
  const classList = ['componentClass1', 'componentClass2', className];

  const classNames = classList.join(' ');
  return <Element className={classNames} {...props}>{children}</Element>
}

then it will be used like this

<ReusableComp as='section' className='special-item' title='actions'>
  <div>
    <button>Do Something</button>
    <a href="/go-somewhere">Go</a>
  </div>
</ReusableComp>

React Hooks and the death of Render Props

Aditya Agarwal — Tue, 25 Dec 2018 03:11:15 +0000

Learn where React Hooks are better than Render Props and if there's any future of Render Props.

https://blog.logrocket.com/react-custom-hooks-and-the-death-of-render-props-a0ce5cba387f

How to avoid (or escape) async/await hell

Aditya Agarwal — Sat, 07 Apr 2018 05:32:52 +0000

have you started using async/await? If so be careful as you may have unknowingly crippled the performance of your application. See if this is the case here