Tailwindcss Integration

[AlexMNet]

Tailwindcss Integration

[moishinetzer]

@Jared-Dahlke here is an example of implementing tailwindcss. Look at the diff between the init commit and the latest commit to see how I implemented it:

https://github.com/moishinetzer/pbandj-withtailwind

I've been thinking a bit and I think the future is this:

Bundling with bun, by default loading all shadcn/ui components.

But, that would be a completely different project, so I will have a separate repo for this. I think this is interesting to most people, so upvote this comment if you would like to see something like this in the future.

[moishinetzer]

Hey Alex!

I'm still considering an extendable way to integrate Styling libraries (MUI, Tailwind etc.)

For now, use tsup's inbuilt postcss integration; you can read up about it on their documentation.

Follow this tailwind installation tutorial, which was made for vite but works perfectly fine for any PBandJ library.

Make sure to import the CSS file with the tailwind directives into your main index.ts file, and for now, remove the css-check script in package.json (or even better, make it skip index.ts)

After doing this, everything just works meaning you can publish your library, and users will have those styles shipped with it.

Note: those styles that tailwind generates will be shipped to the user, but it's unlikely they have their own pb-3 class etc. So it should be completely fine to do so, in my opinion. But again, remember this caveat.

[moishinetzer]

Mantine is even easier than tailwind! Check this quick example package I made. You can install it with

npm i compwithmantinee

It only exports a single component Button, and it works totally fine in any project. Make sure to wrap all exported components in theMantineProvider component

(P.S. If you publish your component library open an issue to be added to the main repo!)

[AlexMNet]

@moishinetzer this is great! Thank you so much!

[enyelsequeira]

Hey Alex!

I'm still considering an extendable way to integrate Styling libraries (MUI, Tailwind etc.)

For now, use tsup's inbuilt postcss integration; you can read up about it on their documentation.

Follow this tailwind installation tutorial, which was made for vite but works perfectly fine for any PBandJ library.

Make sure to import the CSS file with the tailwind directives into your main index.ts file, and for now, remove the css-check script in package.json (or even better, make it skip index.ts)

After doing this, everything just works meaning you can publish your library, and users will have those styles shipped with it.

Note: those styles that tailwind generates will be shipped to the user, but it's unlikely they have their own pb-3 class etc. So it should be completely fine to do so, in my opinion. But again, remember this caveat.

Hello, I am wondering this, is there a way to integrate 2 different libraries, for example I myself want to use mantine and then tailwind, the tailwind part its simple, just wondering about mantine.dev

[AdonaiRdmeek]

That's great project to integrate with 👍

[Jared-Dahlke]

hey do you guys have an example repo with tailwind working? im trying to use this for a shadcn library but can't get the tailwind styles to apply

[moishinetzer]

Hey Alex!

I'm still considering an extendable way to integrate Styling libraries (MUI, Tailwind etc.)

For now, use tsup's inbuilt postcss integration; you can read up about it on their documentation.

Follow this tailwind installation tutorial, which was made for vite but works perfectly fine for any PBandJ library.

Make sure to import the CSS file with the tailwind directives into your main index.ts file, and for now, remove the css-check script in package.json (or even better, make it skip index.ts)

After doing this, everything just works meaning you can publish your library, and users will have those styles shipped with it.

Note: those styles that tailwind generates will be shipped to the user, but it's unlikely they have their own pb-3 class etc. So it should be completely fine to do so, in my opinion. But again, remember this caveat.

@Jared-Dahlke Have you tried going through these steps? I was thinking about porting this to integrate just with shadcn/ui which I might do soon. Try following these steps and it really should just work.

[Jared-Dahlke]

Yes tried it multiple times . What folder should I initiate tailwind in? An example would be amazing if it really is that easy Sent from [Proton Mail](https://proton.me/mail/home) for iOS

…

On Wed, Sep 20, 2023 at 12:54 AM, Moishi Netzer ***@***.***(mailto:On Wed, Sep 20, 2023 at 12:54 AM, Moishi Netzer <<a href=)> wrote: > Hey Alex! > > I'm still considering an extendable way to integrate Styling libraries (MUI, Tailwind etc.) > > For now, use tsup's inbuilt postcss integration; you can read up about it on their [documentation](https://tsup.egoist.dev/#css-support). > > Follow this tailwind installation [tutorial](https://tailwindcss.com/docs/guides/vite), which was made for vite but works perfectly fine for any PBandJ library. > > Make sure to import the CSS file with the tailwind directives into your main index.ts file, and for now, remove the css-check script in package.json (or even better, make it skip index.ts) > > After doing this, everything just works meaning you can publish your library, and users will have those styles shipped with it. > >> Note: those styles that tailwind generates will be shipped to the user, but it's unlikely they have their own pb-3 class etc. So it should be completely fine to do so, in my opinion. But again, remember this caveat. ***@***.***(https://github.com/Jared-Dahlke) Have you tried going through these steps? I was thinking about porting this to integrate just with shadcn/ui which I might do soon. Try following these steps and it really should just work. — Reply to this email directly, [view it on GitHub](#36 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/AH3JIERXTPOELDYEALR7RZ3X3KOJXANCNFSM6AAAAAAVE3BNZQ). You are receiving this because you were mentioned.Message ID: ***@***.***>

[Jared-Dahlke]

fyi to anyone following, i made this PR trying to add tailwind: #42

[Jared-Dahlke]

@AlexMNet @AdonaiRdmeek did you guys get this working? Do you mind posting an example?

[AlexMNet]

Hi @Jared-Dahlke sorry I actually didn't end up working with this as I had some other pressing projects to attend to.

[Jared-Dahlke]

@moishinetzer how do i implement this? I notice there is no .css file in /dist.

Should tailwind be installed in the consumer app?

[moishinetzer]

Well that's the beauty it's all injected when the package is imported. Please read through all the docs all of this is expanded there.

[Jared-Dahlke]

this works flawlessly. thank you!!!

I just added shadcn it was pretty easy as expected. I think the tricky part was just getting tailwind to work properly. But yes, i just spent weeks trying to get to this point. There are a handful of other shadcn starter npm libraries out there but none of theme do all of the following:

work with nextjs (app and pages) and vite
tree shaking
consumer app doesn't have to have tailwind installed
types flow through