How do you use 2 CSS frameworks (one-namespaced) with laravel-mix?

My (strange) use case is a Vue 3 app using both PrimeVue related CSS (primeflex etc) and TailwindCSS, sometimes within the same SFC.

Not being strong in front-end, I've read-up that one of them needs to be namespaced for this to work. Also watched a demonstration at https://www.youtube.com/watch?v=oG6XPy1t1KA&t=238s. I prefer to namespace TailwindCSS between the 2.

What's not clear to me is how to set up Laravel Mix to do all this and most-especially correctly purge unused CSS of both frameworks given that Tailwind is namespaced.

Any guidance would be appreciated.

drehimself

4 years ago

Best Answer

Level 35

To prefix all tailwind classes, you can add the prefix: 'tw-' option in your tailwind.config.js: https://tailwindcss.com/docs/configuration#prefix

If you already have Mix configured to handle tailwind, there's nothing else you need to do.

If you're using Tailwind 3, it uses the JIT compiler by default so there's no need to purge your CSS. You just have to make sure your conent array is set correctly in your config: https://tailwindcss.com/docs/upgrade-guide#configure-content-sources. Also, make sure to have npm run watch running so it automatically generates classes as you write them.

If you're using Tailwind 2, make sure you have the purge array set instead: https://v2.tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html.

If you want to purge styles in the other CSS framework you're using, you're going to have to do it manually with purgecss. This package is popular in getting it work nicely with mix: https://github.com/spatie/laravel-mix-purgecss.

aylara

4 years ago

Level 3

Thanks but I read somewhere that even with JIT, Tailwind 3 still comes out around a hefty 350kb?

How can purgecss work on both simultaneously?

drehimself

4 years ago

Level 35

@aylara Tailwind 3 should use the JIT by default. This means that it should only generate the classes you're using exactly in dev and production. I just tried it on a default project with Laravel Breeze and Tailwind 3 and the CSS comes in at 13kb

css/app.css │ 13.4 KiB

This will be different depending on project size, but file size should stay pretty low.

You can still purge the other CSS framework you're using with the spatie mix purge package.

Please or to participate in this conversation.