cjholowatyj's avatar

Vue/Vite + LightningCSS + TailwindCSS?

I'm trying to configure LightningCSS in my existing Vue/Vite/Tailwind project, but I'm finding it difficult to find any sort of documentation that describes in detail how to use these 4 together. I've enabled lightningcss as the css processor and minifier, but doing so produces an error/warning during build: Unknown at rule: @tailwind, which leads me to believe Tailwind is being completely ignored now during build.

Has anyone successfully incorporated LightningCSS and TailwindCSS together in a Vue/Vite project and can point me in the right direction?

0 likes
4 replies
gych's avatar

Try to replace @tailwind with these imports, this should remove the warning about @tailwind

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
1 like
cjholowatyj's avatar

@gych I’ll double check that… it appears as well that several of my dependencies also use the @tailwind directive, so if that fixes it I guess I can just patch those files every ‘npm install’ and ‘npm update’…

I’m also wondering… what happens to arbitrary classes in Tailwind (I.e. w-[85vw], bg-[487F23], etc) when using LightningCSS? Is it able to parse those classes properly?

1 like
gych's avatar

@cjholowatyj Test to see if any warnings pop up. I don't think there will be any from the dependencies during the build.

You can add arbitrary classes just like regular ones. So, I'm pretty sure they'll be included when building with Lightning CSS.

Here's an example of how they're added in the CSS file:

.w-\[16px\]{width:16px}

I haven't tried Lightning CSS with Tailwind before, so you'll have to test it to make sure it works.

1 like
vincent15000's avatar

I'm not sure that it's a good idea to use both LighteningCSS and TailwindCSS together.

Please or to participate in this conversation.