Add Base Styles For Text Link as a tailwind css til

README.md

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_1021 TILs and counting..._
+_1022 TILs and counting..._
 
 ---
 
@@ -48,6 +48,7 @@ _1021 TILs and counting..._
 * [ReasonML](#reasonml)
 * [Ruby](#ruby)
 * [Shell](#shell)
+* [Tailwind CSS](#tailwind-css)
 * [tmux](#tmux)
 * [Unix](#unix)
 * [Vercel](#vercel)
@@ -890,6 +891,10 @@ _1021 TILs and counting..._
 - [Check If The First Argument Is Given](shell/check-if-the-first-argument-is-given.md)
 - [Format And Print The Current Date And Time](shell/format-and-print-the-current-date-and-time.md)
 
+### Tailwind CSS
+
+- [Base Styles For Text Link](tailwind/base-styles-for-text-link.md)
+
 ### tmux
 
 - [Access Past Copy Buffer History](tmux/access-past-copy-buffer-history.md)

tailwind/base-styles-for-text-link.md

@@ -0,0 +1,37 @@
+# Base Styles For Text Link
+
+[Tailwind CSS](https://tailwindcss.com/)'s base styles directive includes a CSS
+reset called [Preflight](https://tailwindcss.com/docs/preflight). It normalizes
+styling inconsistencies between browsers, and in the process it wipes out a
+bunch of default styles you might be expecting.
+
+A notable one is styling for a text link (`<a href ...>link</a>`). These tend
+to be blue with an underline, use the _pointer_ cursor, and sometimes change
+color slightly when you hover or _activate_ them.
+
+Breaking from that mold a little, here is a reasonable base style for a text
+link:
+
+```html
+<a
+  className="underline text-purple-600 pointer hover:text-purple-800"
+  href="https://twitter.com/jbrancha"
+>
+  twitter
+</a>
+```
+
+This adds the `text-decoration: underline`, some color, the `cursor: pointer`,
+and a slightly darker color on hover.
+
+And for a slight variation, I'll make the `underline` text decoration appear
+only on hover:
+
+```css
+<a
+  className="hover:underline text-purple-600 pointer hover:text-purple-800"
+  href="https://twitter.com/jbrancha"
+>
+  twitter
+</a>
+```