Design tokens as extentions to tailwindcss config

[mateuszmatyszkowicz]

I've been thinking about using tailwindcss as base library for creating components in components library, but once I've starting working on it, some questions raised in my mind. I will ask question, and try to go over the process I currently working on, I would appreciate your comments or thoughts about it,
It's important to mention that I never built components library, also with design system and design tokens its my first time, so everything I'm doing right now are just proof of concept approach which may contains a lot of potential pitfalls

Let's assume we have design tokens which comes from Style Dictionary

const tokens = {
  'ds-base-color-text-grey': '#343434',
  'ds-base-color-text-white': '#ffffff',
  'ds-button-cta-color-text': '#ffffff',
  'ds-notification-color-text': '#ffffff',
  'ds-base-color-background-grey': '#343434',
  'ds-button-cta-color-background': '#234985',
  'ds-notification-color-background': '#234985',
  'ds-base-border-radius-small': '8px',
  'ds-base-border-radius-large': '16px',
  'ds-button-cta-border-radius': '8px',
  'ds-notification-border-radius': '8px'
}

How to make a use of design tokens which already exist in design system and put it together with tailwindcss

Approach 1: Put design tokens into css variables
I've prepared styles.css file contains:

:root {
  --ds-base-color-text-grey: #343434;
  --ds-base-color-text-white: #ffffff;
  --ds-button-cta-color-text: #ffffff;
  --ds-notification-color-text: #ffffff;
  --ds-base-color-background-grey: #343434;
  --ds-button-cta-color-background: #234985;
  --ds-notification-color-background: #234985;
  --ds-base-border-radius-small: 8px;
  --ds-base-border-radius-large: 16px;
  --ds-button-cta-border-radius: 8px;
  --ds-notification-border-radius: 8px;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

To make a use of design tokens we have to write a customs styles file per each component and then use specific css class name in js file.

.notification {
   color: var( --ds-notification-color-text);
   background-color: var(--ds-notification-background);
   border-radius: var(--ds-notification-border-radius);
}

It might lead to many of global css variables, but we could scope them and instead of put all inside the :root we can simply configure them inside

.notification {
   --ds-notification-color-text: #ffffff;
   --ds-notification-border-radius: 8px;
   --ds-notification-color-background: #234985;

   color: var( --ds-notification-color-text);
   background-color: var(--ds-notification-background);
   border-radius: var(--ds-notification-border-radius);
}

so our main css variables file is much less verbose.

Due to this approach we have two different way (which probably will be done in parallel), tailwindcss classes and our own, also we have to write custom styles file per each component (to make a use of css variables).

When it comes to this approach it's worth to mention that we are able to adjust our theme into dark mode or for other brand colors, very simply, which is far simpler that in second approach. It's just matter of dynamically change of css variable.

Approach 2: Put design tokens into tailwindcss configuration file
Thanks to advanced settings in Style Dictionary tokens were processed by transforms and formats to expected form which is JSON object with grouped by tailwinds specific values.

const tokens = {
  textColor: {
    'ds-base-color-text-grey': '#343434',
    'ds-base-color-text-white': '#ffffff',
    'ds-button-cta-color-text': '#ffffff',
    'ds-notification-color-text': '#ffffff'
  },
  backgroundColor: {
    'ds-base-color-background-grey': '#343434',
    'ds-button-cta-color-background': '#234985',
    'ds-notification-color-background': '#234985'
  },
  borderRadius: {
    'ds-base-border-radius-small': '8px',
    'ds-base-border-radius-large': '16px',
    'ds-button-cta-border-radius': '8px',
    'ds-notification-border-radius': '8px'
  }
}

and then inside tailwind.config,js,

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundColor: {
        ...tokens.backgroundColor
      },
      textColor: {
        ...tokens.textColor
      },
      borderRadius: {
        ...tokens.borderRadius
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
}

I want to point that configuration might be done also through plugins to make it more automatic,

Thanks to this approach we still can make a use of tailwindcss, we do not need generate additional css styles files, beacause our whole design system tokens are built-in tailwind, so we can simply write our components like this:

    <div className={'bg-ds-notification-color-background  color-ds-notification-color-text border-ds-notification-border-radius'}>Test notification</div>

When it comes to this approach I have concerns about class names api which with big design tokens list could be very mess, also I'm worried about file size after building whole components library,

Summary

That was just quick overview about my current progress, For now I'm still in phase of thinking and reading a lot of articles which says about css variables and other approaches. I just wanted to lay all my thoughts I had, for sure there is not a lot of new concepts but for me it was important to share somewhere my process, since I'm doing it on my own and maybe I aiming to dead end and someone will point some facts to me if it is and will change my mind.
I wonder in how really it is possible to make tailwindcss a first choice approach when it comes to build components library