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

For every Tailwind CSS project, I add some custom styles. Some styles are used in almost every project. I will share these and I am also curious about what everyone has added to their tailwind.css file.

First, let me talk about my own habits:

• Define -webkit-tap-highlight-color .
• Add bottom fill env(safe-area-inset-bottom) .
• Beautify unordered lists with special symbols.

The following explains these three points in detail:

-webkit-tap-highlight-color

The Android system will highlight when the link is clicked. I don't like this effect because it obscures elements so I turn it off for a better user experience.

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

@layer is a directive for Tailwind that avoids specificity issues by telling Tailwind to put custom styles in which "container" to put. It's like pretending that a cascading stylesheet doesn't exist, so there's no need to worry too much about CSS sorting.

Simply removing click highlighting may cause accessibility issues because it hides interactive prompts. So if you choose this approach, it's better (if you have research on this, I'd also like to check it out) to enable :active to provide some feedback on these operations. Chris provides a code snippet for this.

env(safe-area-inset-bottom)

This utility class handles the bottom bar of the new iPhone (without the "Home" button). Without it, some elements may fall below the bottom bar, making it difficult to read and click.

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

Special symbol list item

I like to use special symbols as list items in unordered lists. I won't punish you for finding this. We're basically talking about bullets in unordered lists. Tailwind deletes them by default via Normalize. I added special symbols to each of my projects.

My method is as follows:

 @layer utilities {
  .list-interpunct > li:before {
    content: '・';
    float: left;
    margin: 0 0 0 -0.9em;
    width: 0.9em;
  }

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

Now we also have ::marker that can implement the same functionality and it is easier to use. I didn't use it because Safari has limited compatibility.

now you

I've shared what I've added to all Tailwind projects, and now it's your turn. What is the custom style you add to Tailwind in your project? Is there any style you are indispensable? Please let me know in the comments! I'd love to get some ideas and start integrating them into other projects.

The above is the detailed content of The Things I Add to Tailwind CSS Right Out of the Box. For more information, please follow other related articles on the PHP Chinese website!