tailwind build won't include extracted component styles

[ckemmler]

I'm setting up a project that combines storybook, tailwindcss and vue.

My goal is to create a library of components that I want to use in a few other projects.

So far, I am able to write components and document stories within my storybook project just fine: the styles are being computed on the fly inside of storybook, and that's really nice already :-)

But when I try to use those components in another project, everything works fine, except for those classes that have been extracted using @apply inside of my components' <style> blocks.

So to be clear, if I have some Vue component, with a <style> section like this:

<template>
  <div class="my-component grid bg-hi h-m-menu text-white fixed top-0 right-0 left-0">
      ...
<template>

 <style>
.my-component {
    @apply grid bg-hi h-m-menu;

    /* custom grid columns here */
    grid-template-columns: 60px 1fr auto;
}
</style>

... all the styles in the class attribute of my component will be generated but those that are specified for the my-component class.

Another issue: I am using rollup to generate the library for my components, and I haven't figured out how to include the tailwind-generated css automatically alongside the generated js code. So I'm using the command line (via npm) like so:

tailwind build src/assets/css/tailwind.css -c tailwind.js -o ../myOtherProject/public/styles.css

which is a bit cumbersome, even if I can live with that.

Your help will be greatly appreciated. I already spent a few hours on this. Really can't figure it out.

Best

[ckemmler]

Also, the only things that would work, although not a practical solution is to include my components' classes inside of the components @layer in the main tailwind.css file. Note that only inline inclusion of the styles works there, which is really confusing (i.e. @import won't work for components although they do work fine for the base @layer)