what's happening to tailwind's lsp client?

yesterday I left my code working, but today I don't know what is happening with tailwind, I tried updating npm packages and everything. this is the piece of code where I struggled to get tailwind to work: (simplified version)
//...
return <li className={`h-${4}`}></li>
//...
//...
return <li className={`h-${4}`}></li>
//...
when I inspect the dom in the browser, the classname is there but the actual class is not. seems like tailwind is running out of order?? note: other react+tailwind projects in my pc are working just fine. how do I debug this?
53 Replies
isaac_way
isaac_way2y ago
AFAIK you have to use full class names you can’t template in a partial class name like that because tailwind compiler can’t know to include the appropriate css Do ‘h-4’ This may have been “working” in the past because to you had a normal “h-4” somewhere else in your code which would’ve made tailwind include that class
venego
venego2y ago
no I'm not tripping. I'm telling you that is just a SIMPLIFIED example. the height of the element is dependent on a variable. it was working just fine. I even was writing and saw other ppl writing tailwind classes in an object and then using them in the jsx with no issue whatsoever. and as I also said I still right now have a project that works with the exact same way of combining variable with strings in the className, and tailwind doesn't have a problem with that. now I'm afraid to update the packages on that project. and If what you say is correct... how should we do variable styling using tailwind then?? maybe it only works on some versions?
Tom
Tom2y ago
@iway1 is right. It probably worked before because you had another h-4 in the code Tailwind only generates the class names it can find and it doesn’t look for partial names If you had another h-4 in the code everything would still work. But tailwind wants you to generate full class names from variables without trying to fill in pieces Sorry. In the link I sent scroll down to the “dynamic class names” section
venego
venego2y ago
well here is the idea of what I was doing: I'm trying to draw these lines that are different in sizes and those sizes are coming from an array. and yesterday I was interacting with those sizes and seeing them differ in size, for the 3 hours working on the project. and there is no way an h-x would lead to those different sizes. and also there was no style attr in the jsx. so It's either I'm losing my sanity or tailwind were experimenting on this.
Tom
Tom2y ago
What do you mean h-x? In this case
venego
venego2y ago
x as a static value/number
Tom
Tom2y ago
Why wouldn’t h-x lead toa different size? I’m sorry. I’m confused what you mean
Tom
Tom2y ago
Yeah. That shouldn’t work. If it did it’s just because you happened to be using a class name that was seat generated somewhere else
venego
venego2y ago
if li had one size they'll all have the same height how? it'd require the same h-${var} or const classnn = 'h' + var;
Tom
Tom2y ago
I’m on my phone so it’s a little tricky to explain but I’ll try Tailwind only generates the class names you use in your code It does this at compile time, not at run time, by analyzing all the string literals in your code So if you say h-4 it knows to generate that class
venego
venego2y ago
oh you mean pure css?
Tom
Tom2y ago
If you say h-${x} then it doesn’t know what that is just from the string literal at compile time
venego
venego2y ago
no I don't have any css other than some global ones like scroll bar and body styles yes I understood this from the link you provided before. thanks
Tom
Tom2y ago
Yeah. But I’m your code it still results in that same class name Just like normal But the css for that class name won’t exist if it didn’t find it in a string literal Cause it didn’t know to generate that css
venego
venego2y ago
I can only imaging that I wrote some style attribute with my subconscious
Tom
Tom2y ago
I don’t think it had anything to do with that Again sorry. Tough to explain in mobile
venego
venego2y ago
oh I'm just trying to understand this https://discord.com/channels/966627436387266600/1078002196718833848/1078023385323409409 did you mean I had a css class somewhere?
Tom
Tom2y ago
Give me 5 to get back to my laptop and it’ll be easier to explain
venego
venego2y ago
take your time no worries
Tom
Tom2y ago
ok so in your code lets say you have 2 divs
<div className="h-4"/>
<div className={`h-${x}`}
<div className="h-4"/>
<div className={`h-${x}`}
when you save the file tailwind will look at this file and see "h-4" and generate this class (or something like it)
.h-4 {
height: 0.25rem
}
.h-4 {
height: 0.25rem
}
that gets added to your global css now if x === 4, then your second div will have a class name of h-4 the browser see that, finds the h-4 class and everything works out but if x === 5, your second div still ends up with a class name of h-5 but the css for that class hasnt been generated so no styles get applied so you end up with the default height for the second div hopefully that explains it better
Daryl
Daryl2y ago
venego
venego2y ago
well I understood this from your first time explaining it. but here is my code: (simplified version)
return [3,5,46,6,7,8].map((height)=>{
return <li className={`h-${height}`}></li>
})
return [3,5,46,6,7,8].map((height)=>{
return <li className={`h-${height}`}></li>
})
so if there was a h-4 in my global css then all of the lis would be h-4. but it's not the case. I saw different heights yesterday. I can't see any other way to generate dynamically sized lis without using style. but I wasn't using style attr, I haven't used it for weeks now.
Tom
Tom2y ago
no, im making a slightly different point. they wouldnt all have the same height
Daryl
Daryl2y ago
If you apply this, you need to consider that your CSS bundle might be bigger than you expect.
venego
venego2y ago
yh... that's very static, I need to set different sizes dynamically from an array.
Tom
Tom2y ago
in your case (assuming you have a <div className="h-4" />) somewhere else in your code
venego
venego2y ago
then my mind is under-performing today ok... but that's static right? only generated once
Tom
Tom2y ago
yeah yeah so in your code you have a random div somewhere thats ^ that results in this in the dom:
<div class="h-4 />
<div class="h-4 />
venego
venego2y ago
so all of the elements would either refer to it(the class) or refer some non-existing class resulting in them disappearing ok...
Tom
Tom2y ago
yes exactly
venego
venego2y ago
oh ok, but in my case they were very different sizes, like more than two sizes.
Tom
Tom2y ago
but "disappear" is actually "take the default height", which will be 0 if your div is empty and the parent isnt doing anything to it but it might get a height if its (for example) in a flex container has content or something
Daryl
Daryl2y ago
If the list of values are based on the available ones, you can use the safelist with a pattern as pattern: /h-./. All the height values available in the Tailwind config will be part of your bundle.
venego
venego2y ago
yes that would led to either 4 or 0. only two sizes I would notice that if it was the case well they have no content so the height would be same(for elements with default height)
Tom
Tom2y ago
yes, but if you also had a div with className='h-5' then a height of 5 would also work it would be random depending on what heightsyou used statically elsewhere in your app all of the ones you listed statically would be available
venego
venego2y ago
oh ok this makes sense since I don't have a lot of elements.
Tom
Tom2y ago
this is true, but not how tailwind is meant to be used i think. the docs call it out as a 'last resort' and i think at this point its more of a discussion about how tailwind works than how to fix the problem
venego
venego2y ago
yh now I get it. my head hurts really bad. I need to go out. thanks @Tom3 @Daryl @iway1
Tom
Tom2y ago
ok good. hope that helps. sorry it took some time to explain
Daryl
Daryl2y ago
Good luck!
Tom
Tom2y ago
its definitely subtle
venego
venego2y ago
oh I'm the one who's sorry 🙂
Tom
Tom2y ago
oh, and ill also add 2 more random tidbits that might be helpful 1) tailwind doesn't include all the integer sizes by default it comes with these (notice the gaps as the numbers get larger)
Tom
Tom2y ago
venego
venego2y ago
yh px is the way to go in my case
Tom
Tom2y ago
2) in my app, i use tailwind for 99% of the layout but when i need something truly dynaimc i use regular styles because that way i dont need to worry about how to generate the full classnames in static strings
venego
venego2y ago
yh I'll follow your way to protect my brain cells left
Tom
Tom2y ago
but for example ill still do something like
<div className="absolute bottom-0 left-0 right-0" style={{height: x}} />
<div className="absolute bottom-0 left-0 right-0" style={{height: x}} />
venego
venego2y ago
I don't know if it's possible for tailwindcss to use babel and do their own transpiling for these kinds of values?
Tom
Tom2y ago
idk. i try to deal with bundlers / transpilers / all of that as little as possible 😛 thats like a whole subsection of software engineering and im having a hard enough time just with the stuff im doing
venego
venego2y ago
yh makes practically a lot of sense
Want results from more Discord servers?
Add your server