00:00 Now it's likely that you might think well I can probably do something like this call start and instead of the hard-coded 3 go because I have access to it logo so logo.column and here row start logo.row and that sounds like a good idea but if I save you can see that it's not doing its

00:19 thing at all it is still just flowing top to bottom left to right and we've lost the dynamic placement and so what happens is the just-in-time engine is not capable or by design does not want to evaluate your code and try to work out what the value is because it would have to do this in javascript

00:38 but also in php in go in ruby and all the programming languages that tailwind can be used in and so instead the just-in-time engine by design only reads everything as plain text it wants to see the entire class string in one bit to consider it and generate the css for it

00:56 in other words here it sees call start something and it's like I don't know this class I'm not going to generate anything and it's certainly not going to generate permutation for 1 2 3 4 5 and here for 1 2 3 4 5 6 so does it mean that you can't do dynamic styles with tailwind

01:13 no it doesn't it just means that you have to have a slightly different approach about it one solution could be to go in your tailwind config file there is a safe list option that you can define where you can pass a series of utility classes that you want to generate even if they're

01:30 not present in the template so we could go call start 1 call start 2 3 4 5 and then row start 1 2 3 4 5 6 and wow look at this this is actually working but as you can imagine

01:47 if there was a lot more possible permutation the safe list would get out of hands although you can use regular expressions if I search for safe list so we've done something like this here but if I scroll down you can see that we can have a pattern of red green blue 100 200 300

02:06 so we could upgrade our setup to a pattern of call start and then 1 2 3 4 5 separated by pipes let's put that on one line and have the exact same thing give it to me copilot thank you

02:22 and that would replace all of this so that still works and it's kind of nice but in general I try to avoid using safe list but of course it's there and it's a useful tool when you need it but let's remove that this is going to break our design once again and instead in this exercise

02:39 we're going to use the style lookup directories pattern before I forget let me remove these dynamic classes that do not work here and I'll go to the top of the file I will remove all of these comments here and for the column classes object which is now very unhappy I will provide

02:57 a key for each possible value so I'll go one and it's column classes so at the excel breakpoint I want to go call start one and at this point I'm pretty sure that copilot is going to understand

03:11 what I'm trying to do and sure enough it does let's see if it stops at 5 because I know it should stop at ah come on see the really cool thing here as soon as I added the 6 it's going to tell me you can't pass property of 6 it should be 1 2 3 4 5 and that's the beauty of this

03:30 typescript record here you don't have to think about it but it's really giving you this guard rails which is really important because we want to make sure that every possible style is covered and we don't have like impossible states that are covered so let's get rid of the 6 and in the same

03:47 way if number 4 was missing now it will tell me here that you are missing number 4 so that is our column classes object and we're going to do the exact same for the row classes object so one

04:03 let's see if copilot knows row start 1 yes 2 3 4 5 I hope it stops at 6 and doesn't go to 7 well done it's learned from the mistake good job so we have these lookup objects set up and now we

04:21 can go and consume our clsx function let me get rid of all the comments uh there was a lot of concept in here so i thought i'd add plenty of comments to make sure that if you don't know typescript or how clsx or merging classes works you're still not lost this is a tailwind css

04:40 workshop and i want to keep the focus on tailwind so whenever we go into stuff like dynamic styles and typescript i want to make sure that this is not blocking you from progressing all right so let's scroll down and how are we going to do this dynamic thing so the li element is the

04:59 parent most wrapper for each style and this is where we're going to add this class name and we want this dynamic style so here i will use my clsx function and i can merge multiple classes so i will reach the appropriate column class based on the logo that column number and i can go

05:18 column classes and then with the bracket syntax use the logo dot column value and so if the logo that column is two it's going to grab column classes two which is excel call star two so

05:37 this is how you achieve this visible entire text string that the just-in-time engine can read it sees that and so it generates it but then you can still achieve dynamic styles by doing it this

05:49 way and then let's go on multiple lines here we will do the same for row classes and logo dot row and i believe by doing this we should have everything working perfectly and yes it does

06:05 let me remove the grid lines for a second and this is exactly what we want and to prove you that this is not faked or magic trick let's take the tailwind logo and move it to the top here so we'll keep column three but we'll change row to one so let's go in logos.ts and we're going to find

06:24 tailwind so column three let's switch the row to one and look at the result and now tailwind has moved there or we could place it at the bottom right with column five and row six the last column the last row and now it should be right there at the bottom so as you can see we have complete

06:42 control through the placement of each logo tile with a simple coordinate system we're using javascript and typescript to empower us to generate some simple tailwind css classes and i think that's super powerful and super useful