Create Your Tailwind Invoice Template for Security Effortlessly

Tailwind invoice template for Security

if you've seen my thumbnails you might think I hate Tailwind if you've seen my videos you probably know I love it I hope these tips help you as much as they've helped me regardless of your familiarity with Tailwind the first one and this is one I really wish I knew about earlier because it helped me learn Taylor much faster is cheat sheets if you already know CSS the Tailwind syntax can be scary to learn and going from something you already know from CSS to the right Tailwind class isn't always easy cheat sheets make it a lot easier the docs are great but the docs are more focused on the what swears and whys not the witches and the witch is the class for padding is something you can find really quickly by looking here which is the class for Flex grow something you can find really quick here and having this one page you can just scroll up and down and find specific CSS properties on if you just Google Tailwind cheat sheet you should find some good options here this is the one I personally choose to use thing two it's keeping it simple this isn't like a trick I can show so much as encouraging you to not be scared of copy paste and generally making your elements simpler a lot of people come into Tailwind expecting a more complex system like styled components that prescribes a specific way of architecting your components or something like CSS modules with a specific abstraction pattern Tailwind doesn't have a pattern around how you should use it it is by Design very simple and generally the pattern for using Tailwind right is also keeping your things simple if you have a nav bar and that navbar has four links in it and you want each of those to be styled the same you can make a component that has these Styles applied and mount that component four times or you can copy paste the class name four times it's not that big a deal it really isn't and if you change your mind and you want to change that underline property to a bigger underline or you want to change the color from Blue 400 to Blue 500 yes it's annoying to change it in more than one place we can also select it once press command d a few times in vs code have all of them selected and change all of them at once I'm not the only one who recommends this the Tailwind team does too if you go to their docs they have a page called reusing Styles in this whole page is for the most part showing you tricks on how to not worry about reusing stuff as much the first thing it says here is use editor and language features like multi-kirks or editing and it shows you how to change things in multiple places at once when the text is the same so if you want to change this from font bold to font medium it's very easy to do you don't need to make a component and as they say here you'd be surprised at how often this ends up being the best solution if you can quickly edit all of the duplicated class lists simultaneously there is no benefit to introducing additional abstractions totally agree and I think people stray away from this a little too often because they're scared of repeating themselves it's not a big deal it's often the easiest and most maintainable solution don't reach away from this if you don't need to the next option they have here is putting it in a loop you can have all of your contributors and you can wrap them with a loop so that each one gets listed individually and then you have all the classes in one place so you have to make a component you just inline the for Loop that has the stuff that you need here you can also start abstracting components almost all the stuff we're talking about view react whatever you can break something into a component and then reuse it more trivially tip number three is somewhat related to this but it's very important and it's a feature in Tailwind I'm going to tell you not to use that feature is ADD apply add apply lets you apply a Tailwind class in a traditional CSS class so in a CSS file you can have Tailwind properties applied to a different class this is kind of useful for applying a Tailwind color to your body background on your application but if you're using this to write Tailwind inside of CSS and then use those CSS classes inside of your app you've now taken one of the biggest benefits of Tailwind thrown it away and replaced it with a bad abstraction that has a high chance of causing technical issues in the future Adam himself the creator of Tailwind has said that he lightly regrets adding apply and it's the feature that causes them the most issues and they spend the most time debugging by far he's estimated the cost of the out apply feature for the Tailwind business in the hundreds of thousands of dollars on the topic of where you put your Tailwind classes the order you put them in is important too if you take anything from this video as a Tailwind user I really hope it's this if you're not already using it the Tailwind prettier Auto sorting is one of the most important things to have as part of your Tailwind experience I would go as far as to say you're not really using Tailwind if you're not using this because of how big of an impact this plugin has had on my experience writing maintaining and shipping Tailwind this does three important things first off it makes it much easier to see if you have conflicting classes because they'll always be nearby each other which makes it much easier to identify debug and fix things when they're going wrong second it makes code review way way easier I now know what classes will be where so when I'm skimming through code I can quickly see where the padding properties are where the flex properties are where the display properties are just by being used to the order that makes me so much faster in code review the same way prettier itself does the consistent formatting makes it easier for my brain to process what changes are happening when I'm looking at code that has changed but the most important bit is that the way CSS classes are applied is not based on the order of their class names it's based on the order of the style sheet so here we have two different elements in the Dom we have a b and b a so this div has classes A and B applied and this diff has classes b and a applied now we're going to do something fun we're going to make the CSS for a in the CSS for a we'll set background color to Blue and now with B we're going to change it when I uncomment this what do you think is going to happen are both going to be blue are both going to be pink or is top going to be pink and bottom is going to be blue both are pink the reason is in the CSS B comes after it no longer matters what order it's in in the HTML your HTML order does not dictate the order the CSS applies therefore very importantly if it is possible for the order here to be different than the order here it will be very hard to debug when something happens it is so obnoxious to deal with problems that result in this or if this CSS in a different file than this one and there's a load in the browser at different times the amount of issues in the amount of years of my life I have lost to debugging issues related to the order of class names differing in production or Dev or any of the other things in the CSS specifically is insane and the most underrated benefit of the automatic class sorting is the order that this sorts your classes is the same as the order that they'll appear in your CSS I I cannot put into words how valuable this is if you haven't experienced these bugs yourself but trust me you do not want to debug something related to this just use their sort order it will keep you from having miserable nightmares in the future just do it it is better you will feel faster using it you'll feel faster reviewing it and you're getting yourself out of potential hell when you do that one last tip and this kind of touches on all the others don't be scared of copy paste a lot of developers are used to npm installing or abstracting their features making everything a reusable component or a piece or installing someone else's pieces the goal of Tailwind is to make writing styles very fast simple and reliable if you have a style that works because you found it in Tailwind UI you found it on someone else's site or you found it in your own code base you don't feel like you have to or abstract it feel free to copy paste because the Tailwind classes are so consistent and work in every Tailwind project it is very easy to take markup from a different project and drop it in the one you're in right now and have no issues this is obviously useful if you're a developer that's touching multiple things or even just a developer that has access to other code bases that have code you might want to use it is even more valuable if you're at a company that has multiple different code bases and you want to be able to context shift between different teams and reuse code between them as well without even having a mono repo much less a component Library that's shared when you have Tailwind as the the syntax that defines how things look in your applications that syntax is a contract that you can copy paste between places and it's still honored in the same ways unless you go crazy with the tail and config which final final tip don't go crazy in the Tailwind config use it to add things don't use it to change things I know I went pretty ham with Helen when I started trying to make it do all the stuff it wasn't built to do trying to make Tailwind work like styled components or like other things the goal of this video isn't to convince you of tail end it's to show you what helped me get good fast and what has made me love Tailwind so much as a long time user