Quickly set margins and font sizes in TailwindCSS
One of the biggest problems we have when working with ccs or style is working with sizes styles paddings margins and so on from the blessed h1 h2 H to h6 p and other affiliates that is to say the other elements that are similar since it is always hell to square that it never looks good it always looks horrible so for that if you are using Tailwind of course we have this package that is very interesting since it allows us to configure that in a practically automatic way really here the documentation is a little abstract and well for what I want to use it and present it to you it is more than enough it is simply adding one of these classes that we have here called PR or as it is pronounced obviously you have to install the package in this case I am going to use a project Arabic as it is a little common it is an important development dependency and really little else here are some things that you can change let me know this part really since I want to show you a little bit how it is that I can obtain
Here for example I have an h1 here I have the paragraph and you can see that I think it looks presentable its more than fine and I really did nothing absolutely nothing with this here you can see that this is the result notice that once installed you have to place this this class obviously you can also place it directly in the component in the di but well since Im using a style sheet here and I dont want to be modifying DIVs Ill place it here directly I remove it so that it is understood notice that they all lose the style in this case remember that as a base I am using Tailwind and therefore all the sizes are reset in this case for the h1 and obviously here everything is also going to break go to the section of this that already has its own style so with this you dont have to worry about the sizes or the pades basically the one that is used by default is this one called base but you can configure another to your needs for example here Im going to place this again here we already have it perfect if I want to vary the size here a little bit for example placing 2xl it will appear:
body {
@apply prose-lg
}And that 2xl exists now everything will appear a little bit well much larger both the text and this Then you have as they say that configuration at hand You can even easily change it through some option for example I said about accessibility If the user wants larger letters and does not want to give them more control you can easily implement it at the application level by simply varying that class In this case I see it like this placing it directly in the entire Body of the part that you are going to use In this case I have a file here called base css that is used in each of my modules which would be the Academy module the Academy application that I have here that is for purchasing books and so on the blot and also the administrator part I am always using that style sheet and therefore it will be in cascade but if not if you do not want it to be like that then simply place it in ccs the specific style sheet which again for me is not necessary for what was said before because I want to use this style that I have defined here as base in any part of my application For the rest I do not have much more to tell you it is basically that You install it configure the size you want to use and we already have all the h1 or well all the hx and also the paragraphs already have a style defined by default
For typography I would recommend this package:
npm install -D @tailwindcss/typographyAnd here you can configure each of these sections remember again to install it and then from here simply use it anywhere whether in a style sheet as in my case or directly in an HTML component as the classes in question are showing you here and that would be practically everything.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter