diff --git a/README.md b/README.md index 3b892f3..8622819 100644 --- a/README.md +++ b/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) diff --git a/tailwind/base-styles-for-text-link.md b/tailwind/base-styles-for-text-link.md new file mode 100644 index 0000000..9efbd60 --- /dev/null +++ b/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 (`link`). 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 + + twitter + +``` + +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 + + twitter + +```