Best way to integrate with components that take RGB Hex code as parameters?

[neviaumi]

Recently , i want to use tailwind CSS to theme my component library backed some web components

So far it make me easily and simple coz i don't have to mange my styled component name / handle CSS conflict

But i got a problems there, it the web components it have one of component that not support styling with normal CSS

To be specific, it was wired-card from wired-component

you can check my storybook here

as you can see in order to set background (let say i want set to red), it need thing like

  <CardComponent className={'tw-w-20'} fill={'#F00'}>
    <h1>
      Card Header
      <ReactWiredDivider />
    </h1>
    <section>Card Body</section>
  </CardComponent>

so my question is, how do i make fill attributes integrated with tailwindcss ? so i can use thing like theme(red.500) instead of hardcode color.

the only way i can get on documentation was referencing in javascript

but the ideally what i want was thing like

  <CardComponent className={'tw-w-20'} variant={'primary'}>
    <h1>
      Card Header
      <ReactWiredDivider />
    </h1>
    <section>Card Body</section>
  </CardComponent>

and under my react component, i just dynamic set style according to variant.

[wongjn]

What styles would these variants to have? Would primary depend somehow on the consumer's Tailwind config?

[neviaumi]

I think i will want when variant is primary

then fill should be 'red-50' in tailwind css theme

if secondary then fill should be 'white-50'

value i just made it up but my point is i want resolve tailwind theme color value to hex code.

[wongjn]

You could indeed use the JavaScript API to achieve this, something like:

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from './tailwind.config.js';

const fullConfig = resolveConfig(tailwindConfig);

const VARIANTS = {
  primary: fullConfig.theme.colors.red.50,
  secondary: fullConfig.theme.colors.white.50,
};

export default function CardComponent(props) {
  const { variant = 'primary' } = props;
  const fill = VARIANTS[variant] ?? VARIANTS.primary;
  return (
    <wired-card fill={fill}>
      // …
    </wired-card>
  );
};

But do take care of the note:

Note that this will transitively pull in a lot of our build-time dependencies, resulting in bigger bundle client-side size. To avoid this, we recommend using a tool like babel-plugin-preval to generate a static version of your configuration at build-time.

[neviaumi]

for the babel plugin part,

i was curious it possible to using in component library ? coz component library always builded

that mean if i have consumer app and have some adjustments on theme in consumer app

it can't reflected on component ?

let say i want customise theme.colors.red.50 to #FAA in consumer app

but as component library already build and include the preval value of tailwind css config, it shouldn’t work ? it is ?

[wongjn]

Yes, using the Babel plugin would mean the colors would become hardcoded.

If this is undesired and you don't want the extra dependencies from using resolveConfig(), you could let them pass a their own color, which would mean it would be up to the consumer to get the correct color from their Tailwind config (if they wanted to):

// …
export default function CardComponent(props) {
  const { variant = 'primary' } = props;
  // Assume if variant is not a key we know, then it is a custom color value.
  const fill = VARIANTS[variant] ?? variant;
  return (
    <wired-card fill={fill}>
      // …
    </wired-card>
  );
};

Or, since the fill attribute seems to be make a --wired-card-background-fill CSS variable style, you could do:

const VARIANTS = {
  primary: '[--wired-card-background-fill:theme(colors.red.50)]',
  secondary: '[--wired-card-background-fill:theme(colors.white.50)]',
};

export default function CardComponent(props) {
  const { variant = 'primary' } = props;
  const fill = VARIANTS[variant] ?? VARIANTS.primary;
  return (
    <wired-card className={fill}>
      // …
    </wired-card>
  );
};

[neviaumi]

Thanks ! your answer give a crystal clear direction !

[neviaumi]

After some testing , i find the second way won't work (set the css custom variable) and first way won’t ideal.

turn out i have do something like that (Angular in example):

In tailwind.css.config

const colors = require('tailwindcss/colors');

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        warning: {
          main: colors.orange['700'],
        },
      },
    }
};

In my style.css

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

:root {
    --colors-warning: theme(colors.warning.main);
}

In my Angular service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class RootCssVariablesService {
  rootStyles: CSSStyleDeclaration
  constructor() {
    this.rootStyles = getComputedStyle(document.documentElement)
  }

  getVariable(name: string) {
    return this.rootStyles.getPropertyValue(`--${name}`)
  }
}

In my component

import 'wired-elements/lib/wired-card';

import { Component, Attribute, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import {RootCssVariablesService} from "../root-css-variables.service"

@Component({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  selector: 'ngx-card',
  standalone: true,
  providers: [RootCssVariablesService],
  imports: [CommonModule],
  template: `
    <wired-card  [attr.fill]="fill">
      <ng-content></ng-content>
    </wired-card>
  `,
})
export class CardComponent {
  constructor(public rootCssVariablesService:RootCssVariablesService) {}

  get fill() {
    return this.rootCssVariablesService.getVariable("colors-warning")
  }
}

this way i can resolve tailwind theme value without extra bundle size. and provide to a way to library consumer customise theme by extend tailwind css theme

[RodneyOssai]

If you have a HEX color in your original project the best way is just to use a simple tool to find the to the closest Tailwind color, Most of the time human eyes can't tell the difference then use the Tailwind colors like the example above.
Use https://figurehowto.com/tools/hex-to-tailwind