Tailwind Plugin

[Zegoverno]

I would like to experiment adding a tailwind plugin... I tried to follow the steps below and pass this new tailwind.config.js like in this example:

tailwind({ tailwindConf: tailwindConfig }),

Install DaisyUI as Tailwind CSS plugin (You need Node.js and Tailwind CSS installed.)

1. Install DaisyUI: npm i daisyui
2. Then add DaisyUI to your tailwind.config.js module.exports = { plugins: [ require('daisyui'), ], } I couldn't get this working, any thoughts on how to do that? Many thanks

[Poimen]

Hi, I'm currently away. I'll have a look into it late next week.

Off hand, the plugin is designed to work with the jit mode so you could try set that mode as well. The reason for that is the purge settings are quite different between jit and non-jit. Give that a try, otherwise I'll have a look when I'm back.

[Zegoverno]

Hi, thank you for the suggestion, I could get it working, but only when setting shadow: false, with shadow: true I can't get the theme variables populated. Many thanks and have a nice week.

[Poimen]

After some investigation, it looks like daisyui is using :root for style css variables. This approach is incomparable with web components. You would need to target :host. Not all tailwind libraries can be used directly because some selectors don't correlate. Tailwind itself is not designed for web components.

My suggestion is to use a global style sheet that pulls through the necessary variables as these will still work with the shadow dom. Otherwise there will be a bit of bloat with the shadow styles of unused variables.

Unfortunately my postcss patch doesn't work correctly so I wouldn't suggest trying that. I'm having a look into it but it doesn't work to put in a rename of root to host.

[Zegoverno]

Do you think twind would help to fix this? Since it is just a compiler?

[Poimen]

There are a couple of discussion threads for support but nothing has been confirmed yet. It is probably unlikely in the near term that web components will be supported.

[Poimen]

In v1.2.1 postcss plugins should be working now.

For daisyUI , you should be able to chain the postcss-replace plugin with tailwind plugin. An example of the configuration is:

// stencil.config.ts
// imports...

export const config: Config = {
  namespace: 'stencil-component-example',
  outputTargets: [
    // targets...
  ],
  plugins: [
    sass(),
    tailwind({
      tailwindConf,
      tailwindCssPath: './src/styles/tailwind.css',
      postcss: {
        plugins: [
          tailwindcss(),
          replace({ pattern: 'html', data: { replaceAll: ':host' } }),
          replace({ pattern: 'body', data: { replaceAll: ':host' } }),
          replace({ pattern: ':root', data: { replaceAll: ':host' } }),
          autoprefixer(),
        ]
      }
    }),
    tailwindHMR(),
  ]
};

HTH

@Zegoverno I'm closing this issue for now. Feel free to open another issue if there is something more.

[nedredmond]

Just wanted to say thanks @Poimen -- this works well!