Inline tailwind classes do not work if you have a Prop with default values

[m-collins]

Steps to reproduce:

• If you have a component file
• And you add a Prop() with a default value e.g. Prop() foo = "bar"
• And you return a component that has inline tailwind classes <div class="bg-gray-100"></div>
• Then the tailwind styles are not applied.

Workaround:

• If you add a css file
• And you like the css file to your component (you don't need to add anything to the css)
• Then the inline styles start working again.

[Poimen]

Are you able to provide a full component example to review?

For instance, if you are attempting dynamic styling (text-${this.foo}-500) then that won't work (from you example it doesn't appear to be doing this, just mentioning incase)

[Poimen]

I unfortunately cannot reproduce this issue.

My demo component:

import { Component, h, Prop } from '@stencil/core';

@Component({
  tag: 'foo-default-test',
  styleUrl: 'foo-default-test.css',
  shadow: true,
})
export class FooDefaultTest {
  @Prop() foo = 'bar';

  render() {
    return (
        <div class="bg-gray-100"></div>
    );
  }
}

which generates:

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-88e032a1.js');

const fooDefaultTestCss = "/*! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com*/a{color:inherit;text-decoration:inherit}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h1,ul{margin:0}input::-moz-placeholder{color:#9ca3af;color:#6b7280;opacity:1}input:-ms-input-placeholder{color:#9ca3af;color:#6b7280;opacity:1}input::placeholder{color:#9ca3af;color:#6b7280;opacity:1}[hidden]{display:none}[type=date],[type=text]{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[type=date]:focus,[type=text]:focus{--tw-ring-inset:var(--tw-empty, );--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid transparent;outline-offset:2px}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}.hidden{display:none}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:host{display:block}/*! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com*/*,:after,:before{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid;box-sizing:border-box}:after,:before{--tw-content:\"\"}h1{font-size:inherit;font-weight:inherit}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}input{color:inherit;font-family:inherit;font-size:100%;line-height:inherit;padding:0}h1,input,ul{margin:0}ul{list-style:none;padding:0}svg{display:block;vertical-align:middle}/*! tailwindcss v3.0.7 | MIT License | https://tailwindcss.com*/";

let FooDefaultTest = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.foo = 'bar';
  }
  render() {
    return (index.h("div", { class: "bg-gray-100" }));
  }
};
FooDefaultTest.style = fooDefaultTestCss;

exports.foo_default_test = FooDefaultTest;

From the generated code, the bg-gray-100 class has been generated:

.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}

Closing as not sure how to reproduce.

If you can provide a demonstration of the component that shows the problem, please re-open :+1:

[alejandro25262]

@Poimen A mi me suced e lo mismo, si agregas "@Prop" y no tienes una hoja estilos vinculada con styleUrl entonces los estilos en linea de tailwind no funcionan. La solución es agregar una hoja de estilos vacia para que funcione.

[Poimen]

Hi @alejandro25262 - I'll see if I can reproduce this again 😄

Thanks for the report.