{"id":335049,"date":"2021-02-26T07:38:36","date_gmt":"2021-02-26T15:38:36","guid":{"rendered":"https:\/\/css-tricks.com\/?p=335049"},"modified":"2021-09-11T08:15:01","modified_gmt":"2021-09-11T15:15:01","slug":"custom-tailwind-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/custom-tailwind-css\/","title":{"rendered":"The Things I Add to Tailwind CSS Right Out of the Box"},"content":{"rendered":"\n<p>In every project where I use <a href=\"https:\/\/tailwindcss.com\/\" rel=\"noopener\">Tailwind CSS<\/a>, I end up adding something to it. Some of these things I add in <em>every<\/em> single project. I\u2019ll share these with you, but I\u2019m also curious what y\u2019all are adding to your <code>tailwind.css<\/code> files.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>I\u2019ll start with myself. In each project:<\/p>\n\n\n\n<ul><li>I define <code>-webkit-tap-highlight-color<\/code>.<\/li><li>I add a bottom padding set to <code>env(safe-area-inset-bottom)<\/code>.<\/li><li>I dress up unordered lists with interpuncts.<\/li><\/ul>\n\n\n\n<p>Allow me to elaborate on all three.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-webkit-tap-highlight-color\"><code>-webkit-tap-highlight-color<\/code><\/h3>\n\n\n<p>Android highlights taps on links. I\u2019m not a fan because it obscures the element, so I turn it off for a nicer experience.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized ticss-bcae17b4 is-style-default\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/1-1.png?resize=914%2C308&#038;ssl=1\" alt=\"\" class=\"wp-image-335154\" width=\"914\" height=\"308\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/1-1.png?w=1748&amp;ssl=1 1748w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/1-1.png?resize=300%2C101&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/1-1.png?resize=1024%2C346&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/1-1.png?resize=768%2C259&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/1-1.png?resize=1536%2C518&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/1-1.png?resize=1000%2C338&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group ticss-a7d4cdb4\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<pre rel=\"Tailwind\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@layer base {\n  html {\n    -webkit-tap-highlight-color: transparent;\n  }\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group ticss-4680cb64 has-black-color has-text-color\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<p><a href=\"https:\/\/tailwindcss.com\/docs\/functions-and-directives#layer\" rel=\"noopener\"><code>@layer<\/code> is a Tailwind directive.<\/a> It helps avoid specificity issues by telling Tailwind which \u201cbucket\u201d contains a set of custom styles. It\u2019s like pretending the cascade doesn\u2019t exist, so there\u2019s less to worry about when it comes to ordering CSS.<\/p>\n\n\n\n<p class=\"ticss-cc2c40f5\">Simply removing the tap highlight color might trigger an accessibility issue since that hides an interactive cue. So, if you go this route, it\u2019s probably a good idea (and I\u2019m still looking for research on this if you have it) to enable <code>:active<\/code> to define provide some response to those actions. <a href=\"https:\/\/css-tricks.com\/snippets\/css\/remove-gray-highlight-when-tapping-links-in-mobile-safari\/\">Chris has a snippet for that.<\/a><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-env-safe-area-inset-bottom\"><code>env(safe-area-inset-bottom)<\/code><\/h3>\n\n\n<p>This utility class handles the bottom bar on newer iPhones without the \u201cHome\u201d button. Without it, some elements can fall under the bar, making them unreadable and tough to tap.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized ticss-d99f67b5\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/2-1.png?resize=870%2C293&#038;ssl=1\" alt=\"\" class=\"wp-image-335155\" width=\"870\" height=\"293\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/2-1.png?w=1748&amp;ssl=1 1748w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/2-1.png?resize=300%2C101&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/2-1.png?resize=1024%2C346&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/2-1.png?resize=768%2C259&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/2-1.png?resize=1536%2C518&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/2-1.png?resize=1000%2C338&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group ticss-0499b2b3\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<pre rel=\"Tailwind\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@layer utilities {\n  .pb-safe {\n    padding-bottom: env(safe-area-inset-bottom);\n  }\n}<\/code><\/pre>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-interpuncts\">Interpuncts<\/h3>\n\n\n<p>I love using interpuncts with unordered lists. I won\u2019t penalize you for <a href=\"http:\/\/www.middot.net\" rel=\"noopener\">looking that up<\/a>. We\u2019re basically talking about the bullet points in unordered lists. Tailwind removes them by default via Normalize. I smuggle interpuncts into each and every one of my projects.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full ticss-0b31ec89\"><img loading=\"lazy\" decoding=\"async\" width=\"1748\" height=\"590\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/3-1.png?resize=1748%2C590&#038;ssl=1\" alt=\"\" class=\"wp-image-335156\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/3-1.png?w=1748&amp;ssl=1 1748w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/3-1.png?resize=300%2C101&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/3-1.png?resize=1024%2C346&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/3-1.png?resize=768%2C259&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/3-1.png?resize=1536%2C518&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/3-1.png?resize=1000%2C338&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Here\u2019s how I go about it:<\/p>\n\n\n\n<div class=\"wp-block-group ticss-f072a601\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group ticss-374811f0\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<pre rel=\"Tailwind\" class=\"wp-block-csstricks-code-block language-css ticss-e2af6ffa\" data-line=\"\"><code markup=\"tt\">@layer utilities {\n  .list-interpunct > li:before {\n    content: '\u30fb';\n    float: left;\n    margin: 0 0 0 -0.9em;\n    width: 0.9em;\n  }\n\n  @media (min-width: 992px) {\n   .list-interpunct > li:before {\n      margin: 0 0 0 -1.5em;\n      width: 1.5em;\n    }\n  }\n}<\/code><\/pre>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p>We also now have <code><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/m\/marker\/\">::marker<\/a><\/code> to do the same thing and it\u2019s a little easier to work with. I&#8217;m not using it, because of the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::marker#browser_compatibility\" rel=\"noopener\">limited<\/a> <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=204163\" rel=\"noopener\">support<\/a> in Safari.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-now-it-s-your-turn\">Now it\u2019s your turn<\/h3>\n\n\n<p>Alright, I shared what I add to all of my Tailwind projects, so now it\u2019s your turn. What do <em>you<\/em> add to Tailwind in your projects? Is there something you can\u2019t do without? Let me know in the comments! I\u2019d love ideas to start incorporating into other projects.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project. I\u2019ll share these with you, but I\u2019m also curious what y\u2019all are adding to your tailwind.css files.<\/p>\n","protected":false},"author":276423,"featured_media":335063,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"The Things I Add to Tailwind CSS Right Out of the Box by @gregwolanski","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[16738],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/tailwind-paint.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":265844,"url":"https:\/\/css-tricks.com\/style-form-tailwind-css\/","url_meta":{"origin":335049,"position":0},"title":"How to Style a Form With Tailwind CSS","date":"January 24, 2018","format":false,"excerpt":"If you've been staying in the loop with the latest CSS frameworks, you've probably already heard of the newest kid on the block: Tailwind CSS. According to its documentation, \"Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.\" In practice, this means using a variety of classes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/image-8.png?fit=1200%2C649&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":287692,"url":"https:\/\/css-tricks.com\/a-better-approach-for-using-purgecss-with-tailwind\/","url_meta":{"origin":335049,"position":1},"title":"A Better Approach for Using Purgecss with Tailwind","date":"May 15, 2019","format":false,"excerpt":"Greg Kohn looks at how to use Purgecss \u2014 a tool that helps remove unused styles \u2014 and Tailwind \u2014 a utility-based CSS framework \u2014 and why we might want to pair these tools together: Tailwind, by intention, is aiming to equip you with an arsenal of utility classes by\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/unused-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335636,"url":"https:\/\/css-tricks.com\/how-to-use-tailwind-on-a-svelte-site\/","url_meta":{"origin":335049,"position":2},"title":"How to Use Tailwind on a Svelte Site","date":"March 12, 2021","format":false,"excerpt":"Let\u2019s spin up a basic Svelte site and integrate Tailwind into it for styling. One advantage of working with Tailwind is that there isn\u2019t any context switching going back and forth between HTML and CSS, since you\u2019re applying styles as classes right on the HTML. It\u2019s all the in same\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/tailwind-in-svelte.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":364880,"url":"https:\/\/css-tricks.com\/adding-tailwind-css-to-wordpress-themes\/","url_meta":{"origin":335049,"position":3},"title":"Adding Tailwind CSS to New and Existing WordPress Themes","date":"April 20, 2022","format":false,"excerpt":"In the 15 or so years since I started making WordPress websites, nothing has had more of an impact on my productivity \u2014 and my ability to enjoy front-end development \u2014 than adding Tailwind CSS to my workflow (and it isn't close). When I began working with Tailwind, there was\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/03\/tailwind-wordpress.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":372576,"url":"https:\/\/css-tricks.com\/using-css-cascade-layers-to-manage-custom-styles-in-a-tailwind-project\/","url_meta":{"origin":335049,"position":4},"title":"Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project","date":"August 24, 2022","format":false,"excerpt":"If a utility class only does one thing, chances are you don\u2019t want it to be overridden by any styles coming from elsewhere. One approach is to use !important to be 100% certain the style will be applied, regardless of specificity conflicts. The Tailwind config file has an !important option\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/tailwind-layers.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":316670,"url":"https:\/\/css-tricks.com\/eleventy-starter-with-tailwind-css-alpine-js\/","url_meta":{"origin":335049,"position":5},"title":"An Eleventy Starter with Tailwind CSS and Alpine.js","date":"July 10, 2020","format":false,"excerpt":"When I decided to try to base my current personal website on Eleventy, I didn't want to reinvent the wheel: I tested all the Eleventy starters built with Tailwind CSS that I could find in Starter Projects from the documentation. Many of the starters seemed to integrate Tailwind CSS in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/eleventy-tailwind-alpine.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/335049"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/276423"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=335049"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/335049\/revisions"}],"predecessor-version":[{"id":351789,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/335049\/revisions\/351789"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/335063"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=335049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=335049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=335049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}