Using Tailwind in library

[johnnyggalt]

Hi,

I'm new to this, so apologies for dumb questions/misunderstandings. I'm trying to write a component library that sits in a structure like this:

/project
    /packages
        /library
            /src
                /components
                    /Example
                        - Example.tsx
                        - Example.types.ts
                        - Example.styles.ts
                        - index.ts
                - input.css
                - index.ts
            - package.json
            - tsconfig.json
            - vite.config.ts
        /app
            // not really important

The app exists only to demonstrate usage of the library, but I wanted it in the same project.

I want my library to use Tailwind and generate a CSS that is bundled with it (or can be loaded separately somehow - haven't gotten that far yet).

I have proven things out by using the CLI tool to run and can see that it produces a CSS of my naming that includes any styles that my dummy React component uses. Fine.

But when I went to integrate with my Vite setup, I got lost. I followed the instructions as far as made sense, but the last step is not relevant to me. I do not want any HTML file in my library. I just want Tailwind to scan all the source files (such as Example.styles.ts) and find my styles, just like the CLI did. It may well do that, but I cannot figure out how to get it to output a CSS file or where to put it because there are no options available on tailwindcss in @tailwindcss/vite.

I am certain I'm missing something obvious here, but how do I tell Tailwind/Vite where to output the CSS? And is there some diagnostics I can enable? I can't find anything obvious around that either.

PS. one possible workaround I am playing with is just running the CLI tool after my main build, removing responsibility from Vite. This feels a bit ugly to me, so I'm keen to do it via Vite if that's the idiomatic approach.