If you've seen me a few years ago, you might think that I hate tailwind and but if your read my blogs you probably know that I love it. I hope these tips help you as much as they have helped me regardless of your familarity with Tailwind.
The first one
Oh this this the one that I really wish I know about earlier because it helped me learn tailwind much faster. Drum roll..... its cheatsheets. If you already know css the tailwind syntax can be scary to learn, and going from something that you already know from css to the right tailwind class isn't alway easy. Cheatsheets make it a lot easier, docs are great but docs are focused on the wheres and whys and not the whichs. Cheatsheet help you with whichs. Like which is the class for padding, which is the class for flex-grow which you can find easily in a cheatsheet. Having this one page which you can scroll up and down and find specific css properties on. If you just search for tailwind cheatsheet you should find some good options but I personally use https://tailwindcomponents.com/cheatsheet.
Second, keeping this 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, which prescribes a specific way of architecting your components or something like CSS modules with a specific abstraction patterns. Tailwind doesn't have a pattern around how you should use it, it is by design very simple. Generally the pattern to use tailwind right is to keep things simple. It you have a navbar and that navbar has four links in it, you can make a component that has these style applied and mount that component 4 times or you can copy past the class name 4 times, and its not a big deal and if you want to change your mind and want to change the text color to blue-500 from blue-400, yes its annoying to change in more than one place but you can select it once press CMD D(in mac) few times in VSCode have all of them selected and change all of them at once. I'm not the only one who recommends this but it is also recommended by the tailwind team. The document shows you tricks on how to not worry about using copy and paste alot. The first thing it say at the time of this writing, is to use editor and language features like multi cursor editing and its show you how to change things in multiple place at once when the text is the same. Like when you want o change font-bold to font-medium is very easy to do. You don't have to make a component. And as they say it , you'd be surprised how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there's no benefit to introducing any additional abstraction. Totally agree with this as I think people stray away from this a little too often because they are scared of repeating themeselves. Not a big deal, its often the most easiest way and most maintable solution, DON'T REACH AWAY FROM THIS IF YOU DONT NEED TO.
Putting a loop
The next option they have 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 on one place. So you don't even need to make a component you just inline the for loop that has the stuff that you need.
Oh no @apply
The next tip is somewhat related, to the one discuss. But its very important in tailwind but I am going to tell you not to use. That feature is @apply. @apply allows you to add tailwind class in a traditionall css class so in a css file, you can have tailwind properties applied to a different class. This is kind of usefull to applying a tailwind color to you body background on your application. But if you are 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 benifit 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, he likely regrets adding @apply and it is a feature that causes them the most issues and they spend the most time debugging bu far.
Adam Wathan - I can say with absolute certainly that if I stated Taiwind CSS over from scratch, there would be no
@apply😑.The behavious is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture.
He has estimated the cost of the @apply feature for the tailwind business in hundreds of thousands of dollars.
Adam Wathan - It literally costs hundrends of thousands of dollars to maintain, that's why. You wouldn't want to spend that money either.
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 post as a tailwind user I really hope its its this if you're not already using this. The tailwind prettier auto sorting is one of the most important things to have as part of your Tailwind experience. I would say you'r really not 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. The plugin does 3 important things. First off, it makes it much easier to see if you have conflicting classes because they'll alway be nearby each other which makes it much easier to identify, debug and fix things when they are going wrong. Second, it make code review way-way easier, I now know what classes will be where so when I am 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 consitent formatting makes it easier for my brain to process what changes are happening when I'm looking at the code that has changed but the most important bit is that the way css classes are applied is not based on the order of the class names, it's based on the order of the stylesheet. The amount of issues, the amount of years of my life Ive lost to debugging issues related to the order of classname differing in production or dev or any of environment in the CSS specifically is insane and the most underated benefit of the automatic class sorting is the order that the plugin sorts you classes is the smae as the order they'll appear in your CSS. I cannot put it into words how valuable this is, if you haven't experienced these bugs yourself but trust me you do not want to debug somthing related to this just use their sort order it will keep you from having miserable nightmares in the future. Just do it, its better, yor will feel faster using it, you will feel faster reviwing it and you're getting yourself our 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 becuase you found it in Tailwind UI or you found it in someone else's site or you found it in your own codebase, don't feel like you have to install 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 mark up from a different project and drop it in the one that you have right now and have no issues. This is oviously useful it 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 have multiple codebases 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 syntax that defines how things look in your applications that syntax is a contract that you can copy paste between places and its still horored in the same ways unless you go crazy with the tailwind config, btw which is my final tips. Don't go crazy in the tailwind config, use it to add things - don't use it to change things, I know I went ham when I started trying to make it do all the stuff it wasn't built to do, like trying to make Tailwind work like styled components. The goal of this blog is the convince you off Tailwind, 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.