The Things I Add to Tailwind CSS Right Out of the Box

In every job where I utilize Tailwind CSS, I wind up including something to it. A few of these things I include every single job. I’ll share these with you, however I’m likewise curious what y’ all are contributing to your tailwind.css files.

I’ll begin with myself. In each job:

• I specify - webkit-tap-highlight-color
• I include a bottom cushioning set to env( safe-area-inset-bottom)
• I dress up unordered lists with interpuncts.

Permit me to elaborate on all 3.

- webkit-tap-highlight-color

Android highlights taps on links. I’m not a fan due to the fact that it obscures the aspect, so I turn it off for a better experience.

 @layer base {
html {
- webkit-tap-highlight-color: transparent;
}
} 

@layer is a Tailwind regulation. It assists prevent uniqueness concerns by informing Tailwind which “pail” includes a set of customized designs. It resembles pretending the waterfall does not exist, so there’s less to stress over when it concerns purchasing CSS.

Just eliminating the tap emphasize color may activate an availability concern because that conceals an interactive hint. So, if you go this path, it’s most likely a great concept (and I’m still trying to find research study on this if you have it) to make it possible for : active to specify supply some reaction to those actions. Chris has a bit for that.

env( safe-area-inset-bottom)

This energy class deals with the bottom bar on more recent iPhones without the “House” button. Without it, some components can fall under the bar, making them unreadable and hard to tap.

 @layer energies {
. pb-safe {
padding-bottom: env( safe-area-inset-bottom);.
}
} 

Interpuncts

I enjoy utilizing interpuncts with unordered lists. I will not punish you for looking that up. We’re generally speaking about the bullet points in unordered lists. Tailwind eliminates them by default through Normalize. I smuggle interpuncts into every one of my jobs.

Here’s how I set about it:

 @layer energies {
. list-interpunct > > li:: prior to {
material: '・';.
display screen: inline-block;.
float: left;.
margin: 0 0 0 -0.9 em;.
width: 0.9 em;.
}

@media (min-width: 992px) {
. list-interpunct > > li:: prior to {
margin: 0 0 0 -1.5 em;.
width: 1.5 em;.
}
}
} 

We likewise now have :: marker to do the exact same thing and it’s a little much easier to deal with. Why am I not utilizing it? I choose to have control of the spacing in between interpuncts and the text and I simply do not get that with :: marker However that’s simply me!

Now it’s your turn

Alright, I shared what I contribute to all of my Tailwind jobs, so now it’s your turn. What do you contribute to Tailwind in your jobs? Exists something you can’t do without? Let me understand in the remarks! I ‘d enjoy concepts to begin integrating into other jobs.