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()}

[Poimen]

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