February 27, 2020 0

Tailwind CSS Tutorial for Beginners-Typography Font-style & weight

Tailwind CSS Tutorial for Beginners-Typography Font-style & weight


Hello and welcome to another new episode of Learning Simplified. In this tutorial, we will be learning about tailwind typography. Now in our previous tutorial, so far we have learnt about responsive previews of our site and we have seen that in this purpose we have used some mobile responsive description right over here, which has this viewport, this content, width, device-width, initial scale which is been set right over here. In this tutorial, all we are going to do, we are practically going to learn about this particular kind of typography which is being described in our tailwind css and in this respect we have previously defined about this font-family and this font-size type and we had made those mobile responsive we had tested them in various width in various mobile devices In this tutorial now we will be knowing all about this respective classes right over here; all the rest of the classes those been used over here, and in the later half we will be moving on other particulars of tailwind css. Now behind the scene, all we had done, we had created a separate container right over here, and inside this particular container, we had provided some kind of

tags, we had used this

tag right over here; we have created some paragraph elements, and all those dummy texts, those we used over here, those are practically searched into Google if you make a search for it, then you need to put it into the place, this dummy text generator and in this respect you will be getting some resources which you can use into project; now in the next case all we had done, we had created this paragraph tags and right now we will be observing the usage of these particular classes in this text element that we have created so far. So, let’s start; now if we get back to their project, in the first place we can see that this is the font-size that we had missed over here; we will be discussing about this font smoothening; but first of all, let’s talk about this font-style. You can see that you can practically change, you can practically make usage of these particular classes of italic and not-italic So, in this case if we use this not-italic class into our text; for say we are using it for the second para which is …this one; so we are going to make usage of this class of ‘not-italic’ Press ctrl s, get back to your project and reload; and you can see that there’s practically no change into our project. as we had used not-italic; so let’s see what the properties they are using right over here; we can see that this font-style is now set to normal; so instead of ‘not-italic’, which is set to default to every particular tailwind css text components, we will be now using this italic class right over here. so instead of ‘not-italic’, if we now make usage of this ‘italic’ class, get back to your project and reload and you can see that in practicality this individual class, this individual text element, it is practically getting italic right now In the similar manner, if we get back to their project this is the ‘italic’ class and this is the responsive version; we can see that you can set the responsiveness…we had discussed all about it on many occasions in our previous tutorials practically we can set this particular ‘sm’ class into ‘not-italic’; in the first case we can set it to ‘not-italic’ that means this will be default for all those previews which is below 640px breakpoint. After that, we can set that beyond 640px up to 767px, not-italic in nature for md: it will be italic, for lg not-italic and so on. So this is how you can practically set them into your project and this is the responsive behavior; so practically these are the two classes those we used here; this italic and not-italic classes which we can use to change our font-styles, of our text-elements; in the next case, we will be talking about this font-weight; so we have this font-weight right over here. We can see that in the first case this is the class ‘font-hairline’ which is practically using a font-weight of 100; there’s ‘font-thin’ for font-weight of 200; ‘font-light’ for 300, ‘font-normal’ – 400; ‘font-medium’ 500 and so on… so if we wish to make our font a little bit of bold in weight then all we need to do, we need to make usage of this particular of ‘font-bold’. So, if we get back to our project and if we use here this ‘font-bold’; get back to your project and reload and you can see that for this second para, the font, the text element it is practically converted into a font with a bold and italic style; so this is how we can practically convert any text element into bold and italic. In the similar manner there are plenty of classes which is been defined over here; we can practically make usage of any of them; we can use this medium or light, for say we are about to use ‘font-light’. which is practically using a font-preview of 300; so if we now get back to our project and reload; we can see that this is the ‘font-light’ with a 300 of font-weight. Now if we press F12 right over here and select the particular element, we can see that this is the ‘font-light’ class which is been used along with particular text-element and font-style is set here to italic and the font-weight is been set to 300. Now in this respect I would like to remind you that you can set any responsive preview for that You can set different styling properties for different… breakpoints…

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.