Search for a command to run...
Hey! I'm a Full Stack Software Engineer with over 10 years experience in the industry. I've built entire platforms end to end, helped others create amazing things, and have drunk copious amounts of coffee, red-bull and beer to get here. I feel like now is the time I start giving all this knowledge and experience back to younger developers that need it. Hopefully I can help you on your journey to becoming an Engineer.
No comments yet. Be the first to comment.
Introduction I previously posted about using HTML and CSS to create banner images on the fly without the use of any tooling other than chrome. Create Beautiful Banners and Other Graphics Easily Using HTML and CSS It seemed to garner a fair amount of ...
Introduction I left university at 23 years old, and got my first job for that same university earning around £23k a year, I have been in full time employment ever since and by the age of 29, was earning over £90k. In the US, that would be graduate sa...
Introduction I have worked for smaller software companies most of my career, and from what I can gather, the interview process can range from overly formal, to overly informal. Every small company is different, and generally will conduct interviews b...
Introduction If there is one this I love, it's doing more, with less. useState is the bread and butter of React. And it's simplicity offers many use cases. However it's simplicity comes at the cost of having to implement various complexities outside...
Introduction Perspective transform looks great and creates a really nice experience for the user. When using a framework like React, implementing something like this becomes super simple only using a few CSS styles 👍 Setup Lets start with a simple ...
Tailwind CSS has won me over, and now if I can get away with using it, I will. However with great power comes great responsibility, and with Tailwind, that mean writing classes in a way that gets you what you need, with as few classes as possible.
Here are some tips I've slowly migrated to using regularly that have made mine and others lives easier, and hopefully now yours too!
You can use Tailwind CSS Playground to experiment with any of these examples 👍
Most of the time when using padding or margins, the spacing you are creating will be the same top and bottom, as it is left and right, so if you see:
<div class="pl-4 pr-4 pt-2 pb-2"></div>
Change it to:
<div class="px-4 py-2"></div>
If all 4 directions need to be the same, just use p
<div class="p-4"></div>
Margins are great as it allows you to create space around an element without creating a needless parent with padding. But in complex UI structures, setting margin-left or margin-right can cause all kinds of hell later on as things change as it can push elements causing them to overflow their parent.
Vertical margins on the other hand are usually fine and very rarely cause this issue. So if you see:
<div class="mx-4 my-4"></div>
If possible, changing it to:
<div class="px-4">
<div class="my-4"></div>
</div>
May save you a headache in the future.
When positioning an element using position: absolute or position: fixed and expanding it to fill its parent, its very common to see something like:
<div class="absolute top-0 bottom-0 left-0 right-0"></div>
A shorthand for setting each directional anchor is using inset:
<div class="absolute inset-0"></div>
This does the exact same thing and saves needless classes!
Many people still use flex-box for almost all layouts, which can get pretty complex fast. You can use grid to layout the top level responsiveness of key sections/elements in your site, leaving flex-box to deal with the smaller, more manageable elements in isolation.
Here is a simple example of a making a row of 4 divs responsive using only the parent:
<div class="grid sm:grid-cols-2 lg:grid-cols-4">
<div class="h-24" />
<div class="h-24" />
<div class="h-24" />
<div class="h-24" />
</div>
Using sm: and lg: modifiers (which simply relate to pre-configured media queries) you can elegantly define how many columns should be in this grid row. Larger screen widths (more than 1024px under the hood) will show 4 in a row, smaller screen widths (less than 1024px and larger than 640px) will show 2 rows of 2, and finally anything less than 640px will show all 4 divs top to bottom.
Sometimes you may see a default setting defining 1 column for the smallest screen widths:
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
In this case defining grid grid-cols-1 has the exact same effect as simply defining grid, as its default column setting is 1. This means using grid-cols-1 is pointless and can be removed.
Let's take a look at the previous example:
<div class="grid sm:grid-cols-2 lg:grid-cols-4">
<div class="h-24" />
<div class="h-24" />
<div class="h-24" />
<div class="h-24" />
</div>
It's using grid which is great, but defining class="h-24" on every child div is cumbersome.
Tailwind CSS 3.1+ to the rescue! If you make sure you are on at least version 3.1, you can do this!
<div class="grid sm:grid-cols-2 lg:grid-cols-4 [&>div]:h-24">
<div />
<div />
<div />
<div />
</div>
This does the same thing! You can use [] to define a selector and target all children that match to apply a class to them! In this case we used [&>div]. The & denotes the current element that you are defining the class on. The > is used in CSS selectors to denote direct children, and in this case, we needed to target direct div children.
Tailwind makes elevation super easy and provides nice looking shadow classes out of the box.
Elevated elements are great on their own to show key content in cards etc, adding an extra slightly higher elevation to the element on hover: really makes a users experience that bit more engaging:
<div class="grid sm:grid-cols-3 gap-3">
<div class="h-32 w-32 hover:scale-110 border rounded-md shadow-md hover:shadow-xl transition-all"></div>
<div class="h-32 w-32 hover:scale-110 border rounded-md shadow-md hover:shadow-xl transition-all"></div>
<div class="h-32 w-32 hover:scale-110 border rounded-md shadow-md hover:shadow-xl transition-all"></div>
</div>
In this example we have a simple div with border, rounded-md and shadow-md. But as you can see, increasing the elevation using hover:shadow-xl and the size using hover:scale-110 dramatically changes the user experience. And as always, we use transition-all to allow those changes to be animated smoothly instead of changing instantly. 3 classes to drastically improve the user engagement seems worth it to me!
NOTE: Always try to change the size of an element with it's elevation. It's just common sense that if the elevation increases and makes an element look like it's further away from the page, that it would also appear larger to the user!
Although this goes beyond a general tip and is more of a fully-fledged pattern, I thought I would share this with you as I find my self using it again and again!
Below is an example of a containing div that represents an overlay, with child div that is responsively centred and even becomes scrollable if there is not enough space to show all of it's content!
This example also uses backdrop-blur-sm to blur the pages content if the browser supports it, bringing even more focus to the modals content 👍
<div class="fixed inset-0 bg-[rgba(0,0,0,0.4)] backdrop-blur-sm">
<div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100%_-_30px)] max-w-lg max-h-[calc(100%_-_30px)] overflow-y-auto rounded bg-white p-4">
<p class="h-64">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
That's it! I hope this article helped you in some way when using Tailwind CSS, and please let me know if there is anything you would like me to add, especially if it can be done better! 👍
Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!