tw-apply/macro

Maintain the speed of developing with Tailwind while creating overwritable class names.

Install

Early development stages, do not use in production yet

yarn add tw-apply

• Setup Babel Macro: https://github.com/kentcdodds/babel-plugin-macros

  • Create-React-App: Supported out of the box
  • Next.js: https://github.com/vercel/next.js/tree/canary/examples/with-babel-macros

• Setup CSS-Modules: https://github.com/css-modules/css-modules

  • Create-React-App: Supported out of the box
  • Next.js: Supported out of the box

• Increase the specificity of your utility classes: https://tailwindcss.com/docs/configuration#selector-strategy

  • You can use a simple tag selector, like html

Usage

import "tw-apply/macro";

function Button({ className = "", ...props }) {
  return (
    <button
      className={`@apply bg-red-500 text-white ${className}`}
      {...props}
    />
  );
}

function App() {
  return <Button className="bg-blue-500" />; // I will be red :)
}

Motivation

Tailwind is an awesome library with a solid base theme that allows the developer to build UIs really fast.

But there is one design detail of Tailwind (or... CSS in general?) that makes writing reusable components that accepts className not that fast.

The issue: Specificity

function Button({ className = "", ...props }) {
  return <button className={`bg-red-500 text-white ${className}`} {...props} />;
}

function App() {
  return <Button className="bg-blue-500" />; // I will not be blue :(
}

When you create a component that uses the Tailwind classes, and it accepts a className, you will face specificity issues when trying to overwrite those classes.

Changing the order of the keys on tailwind.config.js can fix one case, but might break others.

The possible solution: @apply

.my-super-beautiful-button {
  @apply bg-red-500 text-white;
}

function Button({ className = "", ...props }) {
  return (
    <button className={`my-super-beautiful-button ${className}`} {...props} />
  );
}

function App() {
  return <Button className="bg-blue-500" />; // I will not be blue :(
}

The way you can solve this problem is using the @apply function to create a new rule using Tailwind classes.

And that's when you slow down your coding: you have to give that class a name, and as we as all know, Naming things is one of the hardest problem in Computer Science.

The solution: tw-apply/macro

import "tw-apply/macro";

function Button({ className = "", ...props }) {
  return (
    <button
      className={`@apply bg-red-500 text-white ${className}`}
      {...props}
    />
  );
}

function App() {
  return <Button className="bg-blue-500" />; // I will be red :)
}