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)
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
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
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?
Content Configuration - Tailwind CSS
Configuring the content sources for your project.
@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
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.What do you mean h-x? In this case
x as a static value/numberWhy wouldn’t h-x lead toa different size?
I’m sorry. I’m confused what you mean
my bad leme link the code
https://github.com/segfaulty1/algolizer/commit/0f87f853e111e1c0da8ff0acb22edd8b5a0fa972#diff-dfd4f84eb77f3507278ebb8afb2cb4099b926fd0552eec9c4921d29d6e637c38R119
L:119
it's a map that loops through an array and outputs
li elementsYeah. 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
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;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
oh you mean pure css?
If you say h-${x} then it doesn’t know what that is just from the string literal at compile time
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
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
I can only imaging that I wrote some
style attribute with my subconsciousI don’t think it had anything to do with that
Again sorry. Tough to explain in mobile
oh I'm just trying to understand this https://discord.com/channels/966627436387266600/1078002196718833848/1078023385323409409
did you mean I had a css class somewhere?
Give me 5 to get back to my laptop and it’ll be easier to explain
take your time no worries
ok so
in your code lets say you have 2 divs
when you save the file tailwind will look at this file and see "h-4" and generate this class (or something like it)
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
You can use this: https://tailwindcss.com/docs/content-configuration#safelisting-classes
Content Configuration - Tailwind CSS
Configuring the content sources for your project.
well I understood this from your first time explaining it.
but here is my code: (simplified version)
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.no, im making a slightly different point. they wouldnt all have the same height
If you apply this, you need to consider that your CSS bundle might be bigger than you expect.
yh... that's very static, I need to set different sizes dynamically from an array.
in your case (assuming you have a <div className="h-4" />) somewhere else in your code
then my mind is under-performing today
ok... but that's static right? only generated once
yeah
yeah so
in your code you have a random div somewhere thats ^
that results in this in the dom:
so all of the elements would either refer to it(the class) or refer some non-existing class resulting in them disappearing
ok...
yes exactly
oh ok, but in my case they were very different sizes, like more than two sizes.
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
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.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)
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
oh ok this makes sense since I don't have a lot of elements.
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
yh now I get it.
my head hurts really bad. I need to go out.
thanks @Tom3 @Daryl @iway1
ok good. hope that helps. sorry it took some time to explain
Good luck!
its definitely subtle
oh I'm the one who's sorry 🙂
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)
Customizing Spacing - Tailwind CSS
Customizing the default spacing and sizing scale for your project.
yh
px is the way to go in my case2) 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
yh I'll follow your way to protect my brain cells left
but for example ill still do something like
I don't know if it's possible for tailwindcss to use babel and do their own transpiling for these kinds of values?
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
yh makes practically a lot of sense