-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
dynamic class not working #20
Comments
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: ***@***.***>
|
Closing as I don't think there is an issue for the plugin to resolve. Please reopen if there is something more. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
SCREENSHOTS
The text was updated successfully, but these errors were encountered: