Thread Discussion

*Step 1:* Update `vite.config.ts` to include 2 css files (a main tailwind file and an "unprocessed" HubL var file) ```import { defineConfig } from "...

<@UQWGKUEN7> What do you think of this as a tailwind solution? Do you think you can improve it?

<@UDHT6N5SM> i got the TW4 running purely on vite

<@U05UFGFUT39> awesome. Are you using HubL theme vars too?

i havent got that far yet im glad to make run without needing this hybrid of postcss and vite

Yea, I think in the end both versions are the same. Not sure if either has an advantage but I would like to understand more if you/anybody thinks eith...

Id much rather see it as a option during the cms-react npx call to be fair :smile:

When I was initially setting this up I started with just the vite plugin but had issues with HubL vars so I thought PostCSS might help (but the issue ...

The <@UQWGKUEN7> version of this setup should be much better in the end (sorry BJ I’m trying to squeaky wheel this :grimacing:)

ah yea i just run into this now. Funny enough i was able to get around it in hubl themes :smile:

What do you mean by get around it?

my latest themes are using two css 3 css files one for tw imports (yayada) output one and hs.css where i stored all the variables. I've set the hs va...

Awesome. I’m doing the same thing (step 4 above)

I use shadcn so I think I’ll end up mapping all of those css vars to theme vars

yes so despite me getting it run via vite the postcss is doing all the lifting here

<@U05UFGFUT39> have you tried to edit a page over proxy yet? do you ever run into an issue where styles don't load and throw an error? saving again fi...

<@UDHT6N5SM> Havent tried proxy (wont need it in the future tbf) and YES it happens randomly and it throws generic error while resaving the file fixes...

How does it work when viewing a single component in the dev-server? i seem need to import tailwind in every component to have it work, but then i'll e...

i havent got that far to be honest :smile: im still trying to get aroun vite without needing so much of extra postcss stuff to get it to work with hub...

alright. i think i got a somewhat OK solutön for my needs now (im basically not using any hubl for the styling at all) , i use tailwind with css-modul...

Yea well but without hubl tags making themes is painful :smile:

Yeah, im fortunate that this one is very strict, and just for one special client.

ye i got clients like these too but even them i leave them with options since i dont wan to go back and rebuild entire project because of color change...

<@U08NGRVB6PL> that's an interesting solution. Didn't know @reference was a thing

Me neither, learned it this morning...

that actually might be incredibly useful for everyone's setup. Going to give that a try later today. If we could get some kind of alias working so it...

Yeah, really missing the option to set path aliases..

I think somewhere in this channels slack history somebody figured out how to do it...but I can't find it

<@U08NGRVB6PL> can't seem to get it `@reference` working. I'm not all that familiar with css modules. Anything special going on there? like this righ...

and a `@reference` to the dist version of the file I use to import tailwind right?

well still not solving the native hubl in css issue but interesting way to do it via reference

<@U05UFGFUT39> can you try it out and let me know if it works in your setup? seems useful to occasionally split off some css into a related module

I can get the class to show up but it's not picking up the `@apply` classes

i will be doing some work in couple hours so i'll give it a shot

looks like that might require adding a config file (which ideally I'd prefer not to do while using v4)

i was so glad when i was reading TW4 brings, im not doing some backwards compatibility shinanigans to make it work

i wonder if this would work

set source not to ur hubl

yea, good idea

I'll try that now because the @reference stuff is not working out for me at th emoment. but there's a similar solution there too I think: ```@import "...

u can do cmd space to see where it points

^ not sure that works, it's trying to reset where tailwind looks for css

quick one, do you install tailwind into theme folder or the the folder above src?

theme folder

same location as "elevate unified theme"

im looking at their github and viteconfig is outside of the src/theme

oh, sorry, maybe I misunderstood viteconfig is outside of src/theme

you can see the steps I used if you scroll up in this chat

I thought something like this `@import "tailwindcss" source("../../../");` might get tailwind to check for more css files but that doesn't seem to wor...

my module.css seems to be working but does not process tailwind

something like this could be done via postcss import

but i kinda dont want to do folders i want my modules to be separate .tsx files

<@UDHT6N5SM> yeah I think it’s like that. But I import the main.css into a app.hubl.css that vite builds, and the built version of that I include in m...

do you mean that instead of doing this kind of thing:: `import styles from './HomeHero.module.css';` you do import them with `@import` in your css?

^ I'd rather not do that

No, I import the .module files in my component

how does tailwind know about those .module.css files in your setup?

Im guessing that’s what @reference is helping with

I think there must be something else going on for it to know about that file at all. Can you paste your vite.config.ts?

<@U05UFGFUT39> I'm surprised you didn't have a vite version issue when installing `@tailwindcss/vite`

my system might be all screwed up at this point. Tried to go back to the the vite version of tailwind but have that conflict

Im unfortunately away from the computer until tomorrow

<@UDHT6N5SM> i gave on up tailwind vite and now running ur method which seems to be the only way in order to get both TW and hubl vars inside css

<@U05UFGFUT39> interesting. The file that actually contains HubL vars is entirely separate so you probably could have gotten away with the vite versio...

I use vite copy in the config to just move it into the dist folder. And then root makes vars available everywhere

i might give it a shot tommorow too, gonna need some serious investment so i can build future themes purely on react

Yea, I think ideally it would be one file that can handle tailwind + HubL vars but at least it works. If someone can figure out why my setup ignores m...

why do you need module.css?

Best example is using the &lt;Form&gt; component. I can’t directly add styles so I need to @apply and it would be nice to co-locate that code

I always had that as my part of layer components in tw css with comment

Yea, same. It’s definitely not critical or even important but it kills me that I can’t figure out a solution. Tailwind v4 ignores css files apparently...

The postcss solution itself is weird approach (for tailwind) might work for vanilla css

Is it weird? It seems pretty standard / supported in official docs

Well the fact we need to copy files from (folder) to dist, disabling mimify doesnt work. Seems like its "supported" unless.. :smile:

ha, you're right but I have hope. Really weird how minify can't actually be disabled. <@UQWGKUEN7> any idea why that might be? I don't think that's ta...