dynamic class not working

[Aperrix]

DESCRIPTION

Hi everyone, i followed the doc of stencil-tailwind-plugin to setup it to my stencil-storybook project but it's not working.

As you can see to the screenshot the font-bold class is correctly working but the text color is not applied.

🔗 https://github.com/hotchpotch-lab/stencilfy/tree/1-setup-storybook

MY CODE

// stencil.config.ts

import { Config } from '@stencil/core';
import tailwind, { tailwindHMR } from 'stencil-tailwind-plugin';

export const config: Config = {
  namespace: 'stencilfy',
  devServer: {
    port: 4000,
    reloadStrategy: 'pageReload',
    openBrowser: false
  },
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
      footer: 'Built by Aperrix & Damokless'
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  plugins: [
    tailwind(),
    tailwindHMR()
  ],
};

// my-component.tsx

export class MyComponent {
  /**
   * The first name
   */
  @Prop() first: string;


  /**
   * The middle name
   */
  @Prop() middle: string;


  /**
   * The last name
   */
  @Prop() last: string;


  /**
   * The text color
   */
  @Prop() textColor: string = 'black'


  private getText(): string {
    return format(this.first, this.middle, this.last);
  }


  render() {
    return <div class={`font-bold text-${this.textColor}-500`}>Hello, World! I'm {this.getText()}</div>;
  }
}

SCREENSHOTS

[Poimen]

That's a tailwind thing, unfortunately. You won't be able to do text replacement as a style, tailwind won't generate the classes. Check out: https://tailwindcss.com/docs/content-configuration See the section on destruction of class names. Hence in your code: text-${this.textColor}-500 This is where tailwind will fail and you will need to use the full name of the style.

…

On Tue, 29 Mar 2022, 19:36 Aperrix, ***@***.***> wrote: DESCRIPTION Hi everyone, i followed the doc of stencil-tailwind-plugin to setup it to my stencil-storybook project but it's not working. As you can see to the screenshot the class is correctly set but the style is not applied. 🔗 https://github.com/hotchpotch-lab/stencilfy/tree/1-setup-storybook MY CODE // stencil.config.ts import { Config } from ***@***.***/core'; import tailwind, { tailwindHMR } from 'stencil-tailwind-plugin'; export const config: Config = { namespace: 'stencilfy', devServer: { port: 4000, reloadStrategy: 'pageReload', openBrowser: false }, outputTargets: [ { type: 'dist', esmLoaderPath: '../loader', }, { type: 'dist-custom-elements', }, { type: 'docs-readme', footer: 'Built by Aperrix & Damokless' }, { type: 'www', serviceWorker: null, // disable service workers }, ], plugins: [ tailwind(), tailwindHMR() ], }; // my-component.tsx export class MyComponent { /** * The first name */ @prop() first: string; /** * The middle name */ @prop() middle: string; /** * The last name */ @prop() last: string; /** * The text color */ @prop() textColor: string = 'black' private getText(): string { return format(this.first, this.middle, this.last); } render() { return <div class={`font-bold text-${this.textColor}-500`}>Hello, World! I'm {this.getText()}</div>; } } SCREENSHOTS [image: image] <https://user-images.githubusercontent.com/26674548/160670847-515f43cb-bd26-4884-a967-23a172c407ab.png> [image: image] <https://user-images.githubusercontent.com/26674548/160670907-4ab8ba12-f1a1-416f-83c9-537183a16180.png> — Reply to this email directly, view it on GitHub <#20>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAE2XNHCX62XVRQAMQMFVFDVCM5STANCNFSM5R7EZLBA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Poimen]

Closing as I don't think there is an issue for the plugin to resolve. Please reopen if there is something more.