Tailwind Talk: "My Second Hour with Tailwind CSS" with Petr Tichy

hi everyone and welcome to the actual first official tailwheel labs interview recording this is not a live stream but this is the very first discussion i have uh hopefully many more to come so the guest i have today is peter tihie a couple of weeks ago peter did a really nice review of him discovering tailwind css for the very first time so he hit record and gave himself one hour to discover tailwind without any prior knowledge of it and i thought it was really interesting because he clearly hit a hurdle straight away where he didn't want to have to install npm and post css and have webpack build pipeline to just play with the tailwind of course couple of days after his video we released a tailwind play the tailwind playground and i thought that would be a really nice follow-up to his video to present him the tool and have him play around with tailwind with his hello world without setting any pipeline which is what he wished for and is now possible so here it is mr peta tihi welcome to the show thanks simon thanks for having me um so what i thought we'd do before we get started is just uh let the audience know who you are what you do uh we both live in australia uh but we haven't actually met in person which is kind of funny but um i feel like we've known each other for quite a long time it goes back to all the way when i was learning green sucking scroll magic animations and i discovered you really good courses video courses and started talking from then on why don't you give a brief overview of who peter is and what he's working on and why he hates tomatoes that's a great question everyone asked me for the first time why do i hate tomatoes but yes just to go back to what i'm doing i'm a front-end developer contractor freelancer working sort of for myself and last few years i specialize more on the building apps so not really a websites but mostly apps and uh especially you probably know this uh the popular brand in australia calls when you go shopping online at calls so i was working on the platform or the on the on the framework that actually sits behind it so i did all the frame i i did all the templates all the css and i wish that time we had something like storybook to maybe create a lot of components and then reuse them but it was all sort of manually we kept sort of our own storybook our own library of components and then we reused it inside of the angular app so that's that's sort of where i specialize what i like about the front end is to build projects from scratch and usually bigger projects from scratch so the cause is one of the examples and i enjoy mostly the front-end side of things so no i'm not a designer i'm not a back-end sort of devops guy i prefer the straight up html css javascript and react these days that's what sort of i focus on and of course i've heard about tailwind css and i'm trying to learn more about it how to use it when to use it and what is what are the main benefits so i think this discussion of course i'll have a lot of questions that hopefully you'll answer that could help some other people trying to pick up tailwind tailwind css along the way too good stuff yeah like you mentioned the reason i wanted to have you on is a couple of weeks ago you did this video of you i think it's an unlisted video but provided this great feedback for our team of peter discovering his first hour with tailwind css and this in this video you go through the telling docs as a completely beginner and from a fresh angle which is really good for us to see what the first on-boarding experience is and i think a quote who you were that at the very start it says just install npm tell me css post css and new words where i don't want to install post css and npm i just want to play with it and you further discovered that there's different ways uh you can do this there's a cdn link but it comes with lots of warnings that you shouldn't do it because you lose a lot of nice functionality like customizing colors and purging the unused styles and all that stuff and so yeah and so that's where i sort of wanted to pick it up i want to do the first hello world just to see what is it about and i've heard people saying it's a little bit different way of how you style your things how you how you turn designs into actual components in a browser so i wanted to take it for a spin and yes i didn't want to invest the time to actually spin up a webpack at the modules and config and everything so i wanted just is there a simple way how i can convince myself to invest more time into learning tailwind css and i think later on a few days after that you actually launched the tailwind plate right yes so this is exactly right the at the time when you did the video and asked there was not really a great way the the best way was to have the cdn link but then you lose all customization and stuff and maybe a week after you you did that video we launched something called tailwind play what telling play is is a way to in your browser immediately be able to play with the full features of tailwind css you can start using it like if you had installed it with npm and post css and your build step but it runs in your browser so you can see there's a html css and config file tab and i think the best way to learn it would be for you to try to play because it's it's really uh improving on everything you you wish you had in the onboarding experience your feedback was like i wish i could just hello world and play with it and this is exactly what it is okay perfect so do you want me to share my screen now yeah so we have a scene set up where we can see your screen so now we're on peter's computer so of course you've got to hear a default markup with a lot of classes but let's say that i have my own design and let's even simplify to what you've got here if i want to bring in one of these cards from figma design if i can zoom in that's nice because there is the tailwind logo otherwise it wouldn't be as nice okay so let's let's let's firstly just explain me and let's delete this one how would i do simple three layer three column layout of course i've got three columns maybe four columns later so how does tailwind css and how inside of this playground i can play just with layout forget about the details of the card itself but how do i layout three things next to each other or four things and make them responsive and stuff like that i think this this discussion is gonna be interesting because it's gonna be more uh about css itself uh than you think because tailwind essentially maps a lot of css properties to utility classes so we can look at the config file and stuff later but the way you would lay out something like this if you know css and what it can do is probably use css grid or flexbox to make multiple columns so if i bring in uh i've got a little html prepared it's much simpler than what i had in the design right but i've got a container with cards and then i've got one card in it so let's oops yeah i would triplicate that cards and snippets yeah okay so i've got three cards there yeah so what would be the stuff that i need to add to the container to the card itself to see them side by side and maybe make it max width of 1280 or whatever that is some sort of cap cut the width of the container yeah sure so i think we will start uh what i would do first is remove these cards and card classes which is the traditional no you can keep class but remove just the class name so that would be the traditional way of doing css is you have a css class name and then you you apply styles to this but i would just go keep the html without any of the actual classes applied so we can do everything with tailwind i mean it's quite obvious that it doesn't apply any styles but yeah do you get the idea instead of having your css living somewhere else and then you have to map your html to the css and jump between the two files we're going to switch to a workflow of never leaving the html file and so the first thing i would do is my top top div here it's going to be a great container so i would give a class of grid and if you type just g you should start seeing uh all the different utilities that so that's one of the cool things with the with the tailwind play is you get this nice autocomplete which is a great documentation so grid is uh telling this is a grid parent and then you can add another class which would be uh in still in there uh to tell we want three columns you're going to go grid calls so for columns c-o-l-s and there you go okay so if i go inspected now i will see of course the css applied to these containers right so there is still grid template columns that is generated inside of the css so underlying undertale in css is still the pure css as we know it yes it's just a different way of instead of having a class called card and have six different declarations in there you move that to the html and you compose the different css properties with utilities so here you applied a display grid to the parent and then grid i don't know exactly the the syntax like it is a grid grid template column and then it's repeat three times because of course it's three and then there's a min max zero comma one fragment so that's where it defines the minimum and maximum nice so that's that's essentially all you would have to do uh what i suggest you do is if you look at the top right of your ui next to the moon which is the dark mode toggle there's the responsive thing and now you can play with the the width and as you can see it's always three columns now and one of the best features of telling css is how easy it is to do responsive stuff so everything is by default mobile first so now we've said grid calls three and it's three columns from the ground up but if you go if you add uh let's say md before md column and uh yeah so now you've added the medium breakdown prefix and you can see it will only jump if you go bigger than this it'll jump to three column at the medium point okay so it's mobile first it's built with mobile first so anything not not prepended with any of these md or i guess you have small as well and xl or large or what are the other extension yes so you everything applies to everything by default and then if you go sm it's from small and up md is medium and up etc and i like that you already you haven't really used tailwind then you're already figuring out uh through the autocomplete yep so that's four on the larger breakpoint and then the medium is three and then on the on the mobile first we have only one so that's that's good i think that's that's quite of course that's looks simple and where do where can i find these sort of prefix if i don't know if i wouldn't know what md or large is or small where is there is a is there a docs there so that would still be one page with a list of all the classes that are coming by default yeah so my preferred way of navigating it for now i use the search at the top and i would just type responsive or breakpoints and you you would find so it's using algolia search okay cool so here it shows that there's small medium large and extra large is defined so these are the pixel values that the layout changes okay so anything prepended with the md or lg will change to it so okay but the the the breakpoint or the responsiveness of it comes to mobile first then you overwrite the value to be bigger on a medium breakpoints and then you again overwrite it on the larger breakpoints yep okay so one thing i would do next is just as a as a hello world or i would add some background to the three and that's when you might wish you had a templating language because we're gonna repeat three times but it's not a big deal i would add like a background color to each of the three cards and then we can see how the gap the grid gap utility gets applied so can i in this playground give the whole big whole page maybe a gray background so and they keep the card cards white if i jump and take the light gray how do i apply it here give it to the whole paper well i would i would wrap all of it in an extra div or there's nothing wrong with putting your background on your grid it's gonna work as well so we go bg for background and then you will have a million colors to choose from bg dash million not a million but a lot like like scroll down you will see okay so maybe you can use the arrow to preview it in if you use the arrow um you will have a nice uh like discovery of what you want to use but you kind of know already you want this yeah yes okay all right and my my thinking was if i want to give it to the whole page not just uh you see how it doesn't stretch all the way to the background that's why i wanted to give it to the board you could have like a hscreen class which is like a 100 viewport height or there's a different like again it's like css i think even in normal if you write css if the html like you have to say body html whatever like mean height 100 v8 okay so you would compose this again with the so maybe maybe then it's worth wrapping it in an extra div so this div declares the the background and then it doesn't mix up with your grid declaration so just wrap the whole thing in a div yeah it's okay so we should now have everything wrapped in it oops i mean yes i can so i've got a background on the container itself and uh what other classes did you say to stretch it all the way to take the 100 percent of the viewport height well there's this height 100 percent there's h screen which is 100 vh so no it's just h sorry just the letter h dash and then i would try the screen one which is 100 viewport there you go and then if you know flexbox well enough if you want to center your stuff you know you could do like uh declare that wrapper as a flex container and then do alarm align items and justify content center okay so again there needs to be so if i know flexbox how do i relate that to the classes well you think in your head you're gonna think if i want to center these cards i probably have to have a flex wrapper and then align items and justify content center so the first thing you would add a class called flex try to discover if that exists and surprise surprise it does there you go all right so yes but my question is if i of course i knew i knew these flexbox classes but is there a reference that like i like these sort of media queries yeah you know so again i would search for flashlights yeah you can press the the slash or command k like in slack or to to search for stuff and i would just that's how you discover the different okay that's what i wanted to sort of see where if if i get lost or if i don't know then i think some people yes after a while you comfortable with using this auto completion but if you maybe not too familiar with it you you you still want to refer refer it somewhere and i think this this is great great sort of point to come to here okay i don't want to over index on the docs because they're going to change in about six weeks but this yeah there's there's a learning curve where you you're trying to figure out how classes are named but what i was trying to infer is if if you know flex is the right uh tool for the job chances are if you type flex it's a class that's called like this the tailwind has a really intuitive naming convention we just grid is great flex is flex background is big sometimes we don't have the full name but it's uh yeah and then this autocomplete stuff is to me trumps any the the what's the term i'm looking for um documentation because it's like auto documents uh what's available so you get a flex wrapper now and then you can add uh but well try you want to justify centers if you try to type justify you're like hey all the classes are here so justify center so that's the the first axis and then the second axis is align items so i think it's items center there you go item center should put it vertically nice all right that centers it vertically on the page yes yes so like you said when you're discovering uh tailwind from the ground up you can't probably guess that it's item center and that's when you go to the docks but from from experience of me and lots of people i've talked to you you live in the docks the first few two three days and then you start to intuitively guess what the classes are going to be called yeah yeah yeah i'm sure it is intuitive i'm just as i said i'm very raw to it so i'm sort of walking through it as i'm sure thousands of people will after this video but it's it's great keep keep challenging that and asking questions because i i come from like i've been using it since the beginning and for me it's like oh just just you should know that it's cold like this and it's not true so it's nice to see your your fresh eyes just another question on this one so let's say someone is completely new to styling styling in general css layouts and positioning and flex and grid doesn't really matter what it is some people maybe not even know how to position things on the element what are all the options and they would search css positioning and they would end up at css tricks with flexbox guide and stuff like that and then they would try to sort of replicate it within within tailwind so my question is do you think tailwind is even for someone who is completely new to css or is it for someone and don't don't tell me it's for both but i'm just trying to get the idea of do do people who picking television css should they already know the pure css so my answer is gonna be yes they should to a certain extent if you know nothing about css you're gonna install tailwind and be like squinting like now what what do i do like where's my card where's my flex three column layout we just started doing it's not there there's nothing like this i'd say you need the basics of layouts flex grids uh like position absolute relative all the the stuff that is quite hard and you need to learn in css and then you can discover the questions yeah because i i was you know if i was introducing or if someone asked me should i lean tell in css before i learn css i think this answers the question i think people need to understand first the layout the basics of css and not even the basic i think you should you should really know your css as the raw thing because maybe not not every project will have tailwind css and then if you land just that you might be lost in other projects so i think but yeah the better you get at css the better you get a tailwind and it's not the other way one you can kind of learn css through tailwind because of if you hover over any class uh i even didn't mention that if you in your playground here it tells you what what is the css that's implemented so you might get used to these classes and not really know what they do and then oh he did that's how a custom property works with the opacity and stuff like this you can learn your way into advanced stuff by using tailing but you definitely need a a good understanding before it's it's not going to replace bootstrap where you can use bootstrap and use the default designed components without knowing what they do at all cool i think that's good so we've got these lined up and then if we want to add the space that would be this is the grid so is there a space is it so the the because it's we in grid here uh grid has that gap properly that flexbox is about to have uh so you can try gap and see what happens oh oh okay yes yes yes that's what i wanted after yeah so that let's get between the individual grip grid items i guess yeah and it's worth noting that we we're doing just a horizontal row here so we but when you use grid you can define grid columns create rows and then the gap can be different on the x-axis or y-axis as well but your question was how do i do three cards center aligned on the gray background and that's kind of it doesn't look the same for now but we're getting there yep perfect as i said this is the ideal scenario three centered cards in the middle so yeah let's stick to that plan and so if i want to add white background to each of them so let's let's let's do it on one and i guess that would be bg yeah i think for now we could uh focus on the first one and then copy and paste three times yes this is typically where you would use like a templating language and then for each card in cards yeah so i i get that so yeah don't don't worry about these two but let's make the first one look really really good make it work world-class world-class card so background if we want to add some padding some padding around the edges and now i'm gonna stop talking and see you discover the class names because you get the hang of it fairly quickly okay so p i think i played with padding last time so p this was yes that was p5 and so on so this is paragraph to something or putting something so this will just increase the padding that's cool and what what does it again i can actually look beyond him adding 1.25 okay if of course i can visually sort of build it up like this but if i have to be precise to what the designer created then where do i define what p5 stands for and how do i override it that would be my sort of question i know it comes with some sort of grid by default or spacing by default but every project is different unless we all use the default tailwind css then we will all look the same so where do i customize this padding uh on to be my own or whatever the design team that i'm working with suggested so i think the the first thing to do is to understand how where these values come from like you said so maybe in the tailwind docks if you search for padding or spacing you will understand um so you you should have somewhere like a list of possible values but always always always at the bottom of each css property it tells you how to customize see here okay so you scroll up just a little bit more there you go so you get your padding scales and it tells you that it appears in the theme.spacing key so whenever you hear theme it's it's the concept of config file which is a javascript object where you define lots of values and then this will generate all the css classes for you and that's where pro css comes into play so okay tailwind is that really cool way of thinking where instead of writing css for each different values you predefine your your values your restricted restricted set of choices ahead of time and then you define them in a js object and then it's going to generate the spacing for margin and padding and padding left and right and top and bottom and the stuff that would take you forever to do manually okay so if we if we take this example yes seam spacing small eight pixels does it mean on a sma small break point the padding one will be eight pixels no no that's not what it means this one replaces the the default scale which is one two three four eight twelve whatever and it it says i don't want any of that i want small medium large and extra large so this is gonna take it for a spin yeah okay it will break what you have because you will remove the p 10 or whatever you use but it's fine that's why we want so okay so let's let's remove it so we don't break it okay so in the conflict file um so you see you have your theme key and you probably just want the spacing object in there yep uh worth mentioning you also have the autocomplete for everything in there so if inside the theme object you start typing uh letter s it should say hey i i guess clippy will come and say are you trying to change the spacing and so this seven what does this seven relate to okay there's something i want you to realize here can you see how spacing is wrapped in an extend key yes that one so if you apply spacing directly inside theme it's gonna override everything for spacing and if you put it in the extend it says keep every of the base values and then extend it with my value seven so tailwind out of the box doesn't it it goes one two three four i'm not sure but then it goes to six eight it starts keeping bits it's not from one to ninety nine every single value so here this example adds a p-7 uh or margin mt-7 which would be 1.75 rams which is not part of the default config so it extends but so inside so if i would take this just a small one small eight right what i would do is add it to the extent yes that's it and now if you go back to the html you should have all the spacing like padding and margin would have a m sm or p sm and it should be already in the autocomplete look at this it generated all this left stop x y okay that's cool and if i inspect that it's going to be the value that was defined yeah is my my my inspector is not showing up is it i'm just sharing the window right we just see that you are selecting stuff but we don't see the difference all right okay so just in the devtools of someone watching that in the dev tools there is a class applied to it b hyphen sm and that transfers to padding 8 pixels so i think that's the same thing as if i show the hover state here yeah that's the same thing that's what shows in there okay so yeah perfect that's i think that's another discovery for me how i can customize it and make it make it our own and you said team extend spacing will just add and keep all the other default ones in there for me so i didn't lose any of the default ones but i've added one small value or i can call this whatever i want i guess yeah that's that's gonna be the the name of the class name that you decide so it's gonna take p for padding and then dash and whatever if you say call it tomato or peter or something you're gonna have p dash peter eighty pixels okay good i like it i like that that's that's a great thing but it's it's nice that you because a lot of people get tripped up on they just put the spacing or whatever customization straight in theme and then they're like oh i've lost every other value what have i done okay so can you reiterate what is the what is the difference between so this one just extends it keeps my own thing on top of the default built-in values yes and if i put it on in theme dot or just theme directly then it would just keep that okay so what if we try yeah so if i put it directly in here oops no there have to be spacing right yep ising and it's an you open an object yeah and then you can paste this in then i have only the sm available nothing else well because you extend it as well i think you're gonna have the seven as well but you lose every so go try auto complete see what you have left and you should have yeah just seven and small you have uh removed the generation of all the other spacing classes which is actually they are the by far the most used utilities in tailwind someone came up with a graphic that shows the usage of different tailwind classes in the world and margin and padding is like the vast vast domination okay so for anyone watching do not do this do not put spacing directly in the theme always just extend it if you need it but i guess the default built-in is quite flexible anyway isn't it well it's it's very well thought and there's a lot of design thinking and experiments behind the scenes but it allows if someone has a very rigid design system instead of colors and spacing and they're like i want my stuff nothing else you just put it straight into the same key and off you go you've got your completely custom config file that erases everything by default perfect so i've got some spacing let's say this is fine let's don't go too overboard with the is trying to be precise with here but let's add the borders border radius so i guess that would be b r or border order somewhere must be board radius i'm trying to let you struggle no please tell me about the radius round it around it there was something with rounded right round it rounded the radius okay so that's rounded the default one extension but it was around it small medium large does it make more or less of course not so small is less small is for the radius 1.27 ram and large lg by the way as you as you go up and down with the arrows i don't know if you've noticed but it shows you the value like if you if you remove that and start typing you you go up and down it shows in the preview but you can also see border top left right oh you have to hover over it probably because it's too short yeah i would like to see the whole thing in this maybe okay yeah that's it that's better once you've got this thing open you can go up and down and you see the whole thing that's perfect so i think this this is what i was looking after because all looking for because without it i went always back deleted the class it's sort of a little bit clunky but this is good that i can actually see it exactly here perfect so i've got let's say let's say give it give it a large one give it a little bit more and it's perfect so you've got rounded corners what about drop shadows i think we had some some sort of drop shadows at the top just drop shadows so would that be shadows or draw oh yes shadow so we're getting rid of the drop or box i like that because in css sometimes it's box shadows drop shadows or yeah text shadow so shadow is fine and shadow a little bit at the bottom so and if i wanted to customize it and make the make the shadows pink i would have to go to the config and extend the shadow i guess would be try shadow box shadow like the autocomplete will tell you when you hit the will it uh and if you if you can't find it you go in the documentation and i mean i work at tailwind labs and i've been using tailwind forever and i still uh hit these problems where and i'm sure adam looks at the ducks as well every now and then okay so you go this is a box shadow yes so box shadow is the object in the config file that you customize that it didn't show as a auto completion and a box shadow you see what are we doing wrong shadow doesn't complain after that so now you're in extend so you can add a value without deleting any of the existing ones yeah so let's go back take this value so would you check the whole css value as you would normally apply and that's what you would put in and just make it make it really black right so be that do i then have access to box shadow or shadow hyphen test yes okay so there it is there is my beautiful yeah beautiful it is subtle subtle drop shadow so that's this is perfect this is the classic shadows that people me included when you start design you you want a shadow and you because you really want to see it and you make it like this and then you realize it's way over the top but when you begin design like you see people doing these flyers for schools and they have this massive drop shadows yeah this is my space in the early 90s exactly okay so shadows is here and again i just went to the theme extent added my own value if if the design comes with something else that the default ones then i can put it here change the color change essentially anything you would ever write in the box shadow properties or anything that is valid css property you can customize that and get the class generated based on the on the on the prefix that you essentially here you you adding the it's not a prefix it's a suffix right so box shadow or shadow hyphen test then results into box shadow with this okay but you start to see the the paradigm shift from writing css classes to no no what what we care about is the design tokens or values and then i want to let the system generate all the utilities based on the name i've chosen and it also generated the sm shadow test and lg shadow test so you can have responsive you can have that super big shadow only on large break points i added extra space that breaks it but i like how it gives me the auto composition saying that there's something wrong with it which is perfect so if i fix that then we have nothing on the medium breakpoint and if i go to the small default one we have the myspace coming back which is good okay so if i wanted to add a little bit of let's say i'll just grab a pink color what if what if i want to have a mobile just with pink so i want to change this to be pinkish like this i'm just gonna copy the css for it and that's just which utility did you use i don't know that one and then i realized you're in devtools doing it yeah i mean i mean i mean devtools just sort of changing in color so i want to keep it as it is so that's that's fine but on the on on the mobile only so on the small breakpoint why can i not copy that so again small and then shadow s can i override just can i have my own custom saying can i have this different on smaller breakpoint and larger breakpoints or not no so what you would do is define two of them you would define two different values and then uh toggle them with the breakpoints this would be like that i would just have to put a different color over here i mean you can write any css you want until when you can you can write really really advanced css and we can talk about it later but if you do it in the config you you have to to forget the it's really like little tokens you compose together and so if i go on small should that show my shadow pink or is this overwriting it well it's gonna it's gonna show between small and medium so it's going to be uh test at the start and then pink it doesn't the problem is the issue because i'm missing comma inside of here so i don't know why i copied it from the yes here it is okay so it was my yeah my bed copy paste copy paste okay so it was wrong already so if i put the back again the md shadow test would be on the audio breakpoints that you showed yeah so now you get pink in between the mobile yeah yeah okay that's purely mobile first then it goes to small breakpoint which is defined somewhere as the 640 or something and then that turns into pink because of this class and then anything above that goes back to this class which is defined the dark black background okay you you reapply the tests that you had removed yeah okay cool and if i look at the css just so i validate it for myself sure everything is oops where is the class here it is and inside of the dev tools it's it's sort of it's the default overwriting cascading css so it overrides the the thing defined in the previous breakpoint yeah so that it's still uh i mean it's still css under the hood but this this playground makes it feel magic because you just define stuff in the config file and then it's there but what it's done is it's re-run the whole thing through post css and generated a new style sheet and then uses that with the new values and autocomplete picks them up so let's leave that as small and did i zoom in no it just it zooms out because i resized okay yeah just because i have the responsiveness on yeah sometimes you want to preview a white breakpoint but you don't have space on your screen so you can over scroll i guess but yeah okay let's look at it like this for the rest of the design because it's probably easy or nice yeah yes okay so let's see next step would be maybe break it down into the three sort of spaces so the image at the top then this little bit floating in the middle and this floating at the bottom so again what would be this is the image and so if i want to flex this as a column of flex direction it be a flex yeah so that flex is its own class to define flex and then flex call yep cool and then i've got the i've got it everything of course it's it's it's by default that way but i think it would make the columns if there was more text in this column everything would sort of expand and the card would always align right so that's that's what we want okay cool then if i want is this one title this one thing should be should this be one tight one thing title it's up to you general today if i look at it they this is one oops this is one thing this is one thing so let's keep it just for this flex wrappers yeah yes yes it is okay so if i give this margin so if i want margin bottom is it mb or yes mb something okay this on the title i want i want to make the title different font so let's let's look at font concises and stuff so if let's say this is h1 this should be yes maybe h2 yeah yeah yeah okay h2 and how do i define the font size so do i do i is there one side so that's one way you will probably struggle because it's actually called uh you found it texts yeah so you got text so if i go to my design so let's play size to be okay it's 28 pixels over here and how do i [Music] add that to your values 28 pixels is i mean 32 is 2 ram so it's probably 1.75 rams which is uh the next one three xl maybe what does this give you uh it's just gonna be a bit too big but it's okay we can live with it today this is of course coming with some default font style as well a phone family how do i define or change font family is it also in the text or is it yes but this uh it starts with font dash so if i don't have this one is the open sense this one is open sense and is is is open sense here or not so you can see the default is like the system ui uh fonts and then there's default ones but again you can extend the config file to add a font open or font brand or font whatever all right so i would define my own one in the config or extend it that would give me a class font open that would then result in that font being applied to this element just like everything else in tailwind you extend the config values and then it generates classes for you okay okay so i think i think we sort of going over the same thing now like i would go through the rest of the the card to obviously get it over there let's let's do one more thing so at the bottom we have two again two sort of grits or two things side by side and a border top so let's let's try to do this little bit could i just show you one little thing before we do that yeah uh if you if you look at the your design there's similar spacing between the logo and then the text and then the button and what you had started doing in the html is applied margin bottom to each and uh this is very common case where you have every element inside a container that have the same spacing except the first or the last one and for a situation like this there's a really cool layout utility called it's kind of like space between it it handles it from the parent level so if you go to the div that wraps the this one yeah you can go um space uh dash y for the y axis and then you can see that it's gonna apply the same spacing between each of the children elements okay so that's super useful when you have a list of things with the same spacing like a navigation or it happens actually quite often and it's nice to be able to give the responsibility of that to the parents and then each child technically shouldn't know how to position itself from the parents that's the the layout concern is for the parent element okay so i just thought i'd actually do that yeah that's perfect what does this result into like if i hover over it the the intellisense thing is having a struggle because it's uh probably one of the most complex classes in tailwind there's quite a bit of of trickery basically it applies the spacing on the top element except the first one perfect so i think yes this one probably has a little bit more css behind it that's why it doesn't show in the preview here yeah but uh yeah i think it's great great to know that you can apply consistent spacing between elements inside that's one of the first things people say hey i have an old at least with 17 items and i need to put the spacing in each of the 17 children and arguably it sucks and so this allows you to do it from the parent which is very nice okay cool so this this yes oh this html is not really 100 as i said i just did it quickly before the demo so if if i have i have a border top so let's let's make one container let's strip this down i'll just keep the image for later later and we just want to have the top so border or border full border for the top how do i define border just top so you define the border that you're triggering for targeting first and uh potentially the width as well the default is just one pixel but you have zero two four it will do nothing by itself but it will say whatever color you choose next is gonna apply that to the border top for one pixel okay so i need the border t to get one pixel border top and now i need to define border color yes to be c or border where is the border color is it we just go border and then border dash and then the color like gray 400 or [Music] the box shadows over with it so that's okay i need to define this before it changes otherwise the t what was it it was g2 to get it two pixels okay and then still it overrides or adds this color to it already that's cool so let's keep it t by default for the one pixel and then i have two things side by side in it so we would have two different containers and one left text on the right so essentially you you are yeah as you as you said at the start now i see how i'm not leaving html elements or html html page by styling usually you're switching between two two documents you you're writing css in in one and then html in another one so you're definitely switching or you have both open at the same time and yeah here it is you you just doing it in one document which of course it takes a little bit of a little bit of practice and so at the start i guess everyone is a little bit slower in telling css before they get up but then the the the biggest selling point for future is it the scalability right the extensibility and that it strips out all the unused css yeah and you've removed two things from your workflow where the first is switching between css html scrolling up and down finding the spot but arguably stronger you've removed the needs to name anything because the utilities are already named for you so you're like is it card wrapper or card container or card box thing dash dash and you know like you start creating these weird naming conventions this goes out of the way completely because you just apply the existing classes okay cool so i think i think we've covered quite a lot in terms of the the generic styles and and extending some of the the different or default paddings and and you showed me how to do the custom font sizes what else is in this playground that people can play with and you know maybe someone who is already a little bit more advanced with with tailwinds what else can they do here in the css can they i don't even know what utilities he ha yeah plugins and stuff like that so maybe just run me over maybe share your screen and run me over what what else can they use inside of stillwind css playground all right so i'll switch back to uh my screen play so you mentioned this what are these tailwind-based components tailwind has three main layers what it's called base is uh mostly like normalized resets and we do a few more opinion edited things to to reset everything to base styles that look exactly the same in in like each browser but you can think of like resetting the margins and the the colors and font sizes stuff like this components is what i want to say uh most advanced no i don't want to make assumptions i never use components i i much prefer moving to a templating language and have a card that has the utility classes instead of creating like a card css component but there's a layer for this which lets you abstract css components its purpose is to be just before utilities so if you create a card component it's going to be overrideable by the utility classes where if you had if you had that component below it would not you couldn't like change the background color of one of the cards with utilities because of the cascade and specificity but the vast majority of tailwind happens in the utilities maybe i can show you one little quick thing that's pretty cool like we've seen already how to extend different things but i think the colors are quite interesting because that's one of the that's one of the first thing that people want to customize right let's say i want to have a class called i hate i've already guessed uh what the color will be um tomato it's a javascript so it's a string there you go so now by just adding extending a color called i hate which resolves tomato if i go in any i can go in here i hate so you can see it generated background colors border colors text colors placeholder colors divide colors right so you can also use it inside of the i see you've got the from and two which is used for gradients and stuff like that yeah let's go replace our from till here with from i hate uh which is going to look pretty weird but there you go so now we got a css tomato color that is used as the from value of the gradient okay that's perfect so just by extending that one by just putting that one property inside of the config you generate a lot of extra classes that you can then quickly reuse inside of your manual so i think that's definitely saves a lot of time then generating a lot of that so that's that's really cool yeah we saw the example with padding at the start but i thought colors is one of the most expressive one because it generates backgrounds and borders and like there's a lot of different colors and doing it by hand going to add all these css utilities would be absolute madness so yeah and typically you could not do any of that without installing post css and node and being able to do it straight up there in the config file and then prototype so say in your design the button color is a specific color you just add it to the color scale and then you can have the design that matches exactly what you need okay still prototyping in the browser which is very cool good so for as i said this is perfect second hour with tailwind css for me if we would wrap it up with what is the next thing if i decided okay let's i've got some project running on my local i want to give tailwind css a go where is the guide or link to the documentation how to install it inside of a react app or next js app where is the where can we send people after watching this hey if you want to take it to the next step and install it on your own project where it is so if we can sort of give people call to action if they enjoy this and if they enjoy delving in css telling css in general where they can go to actually install it so i did not pay you to say that it's funny you ask because we just started a new work cycle at towing this week and my job is to create lots of setup guides with next and noxt and laravel and craft cms and like what have you to improve this user journey currently if i go back to the doc sites there's this get started button right at the top and it tells you the step that you would do if you are going to like dev locally on your project instead of the the tailwind playground so you can see that it involves the creating a config file which we already had done here nicely for us with a few custom extend but the default tailwind dock would look something like this and then you can you have to set up post css which is where beginners there's a lot of friction here because it's like oh what is i'm scared of it and it's not you just have to define which plugin it should run through which is not super hard to set up but it adds a lot of friction to the hello world i guess okay so just if there's someone completely new to this post css is a plugin that runs in the build time build process where it takes the css and can strip out the different things from the css can add prefixes so it covers all of the all the browsers so it's it's a step in the build process that it takes the css and modifies it in some way and in this config you can just define what should happen to the css exactly yeah it's uh there's pre processors like sas and less that have a syntax and then then generate css and pos css will take the css and then process stuff on top of it a lot of people do not know but they use it because they run auto prefixer to add prefix vendor prefixes to their css and that's an auto prefix plugin all right that says post css plugin sorry okay um yeah so you can see we have examples of how to do it with webpack or gulp or laravel mix or all of these different tools but there's still a lot of the questions i answered daily on the github issues and discussions is hey how do i set up a tailwind with gatsbo with this and that and so we're going to work on the series of little setup guides that will have hopefully a code example and then a nicely simple step-by-step uh tutorial and maybe even if we have time a little video that just runs through the process perfect that's a great uh great um great way to onboard people from different different sort of backgrounds different platforms gatsby xjs create react app you know if you have a lot of these guys then the entry point will be much smoother alrighty thanks for thanks for showing me around the tailwind css playground it's been it's been a pleasure as i said i'm starting up with it i'm starting to like it and of course i need to play with it a little bit more before i take it and put it on a big project and just maybe one question before we wrap it up how hard it is to put tailwind css into an existing project that maybe is going around for a year and a half or two and has already a decent css code base quite a lot of components is it something that could be quite hard and tedious or is it something that you can incrementally add and maybe new components just use their own css what what is your take on this uh i have a pretty strong take because my my whole journey into utility for css was refactoring a bem methodology site that i built and i think it was built quite well but over the time it got out of control and my process was to first uh add another css library called tachyons but the principles are very similar and first i wanted to stop writing css and start doing more and more with utilities so it's definitely possible tailwind has a couple of tools to to provide better ergonomics for this first of all you can have an important key in your theme that will add importance to every utility so you turn your composable low specificity utilities into this absolute hammers that if you go bg red 200 there's no questions asked unless you have inline styles in the html it will make the thing pg red so you can turn all the utilities to have an important and that's a very aggressive way to make sure they win and then it sorts you out and then you have some issues with it's quite common for someone to have a text center utility classes when you write your own css you probably have like some bootstrap does it everyone builds their own go-to helpers and then the name can clash so tailwind also lets you have a prefix so if you go you want to prefix every utility with tw for tailwind dash blue background blue 200 then you have to manually type tw in front of every single utility you apply but that that prevents you from having collisions in terms of naming conventions so between the important flag and the prefixes you can go and sprinkle utilities with on top of an existing code base okay cool perfect perfect answer and as i said i'm excited to dive in more and explore it more on my own projects and then maybe roll it into some bigger code base as i work on some bigger projects so thanks for showing me around and uh it's been pleasure thanks for coming that was really really interesting and i always enjoy seeing this perspective from a newcomer like it opens our eyes on a lot of things that we take for granted perhaps again thanks simon see you soon bye

Channel: Tailwind Labs

Views: 6,734

Rating: 5 out of 5

Keywords: Tailwind, discovering, learning, HTML, CSS, learning Tailwind, Tailwind CSS, interview, Tailwind Play, CSS framework

Id: 18I7bYe-e3o

Length: 60min 19sec (3619 seconds)

Published: Thu Oct 15 2020