daily-email: add 2023-01-21

website/src/daily-emails/2023-01-21.md

@@ -0,0 +1,20 @@
+---
+title: >
+  Tailwind: Not just translating CSS to utility classes
+pubDate: 2023-01-21
+permalink: >
+  archive/2023/01/21/tailwind-not-just-translating-css-to-utility-classes
+tags:
+  - css
+  - tailwind-css
+---
+
+Whilst a number of classes that Tailwind CSS generates are single-value utility classes such as `.block { display: block; }` and `.relative { position: relative; }`, it also includes additional things such as [setting a default line height with a font size](https://tailwindcss.com/docs/font-size#setting-the-font-size), adding variants for [group-hover](https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state) and [focus-within](https://tailwindcss.com/docs/hover-focus-and-other-states#focus-within) (as well as various other pseudo states).
+
+It includes utilities for adding [horizontal or vertical space](https://tailwindcss.com/docs/space#add-horizontal-space-between-children) or [styling dividers between elements](https://tailwindcss.com/docs/divide-style).
+
+As well prefixing a class using a screen modifier, such as `md:flex`, you can stack them and set a maximum screen value. For example, `md:max-lg:flex` will only flex between the `md` and `lg` breakpoints.
+
+If has official plugins for typography styles, forms, line-clamp (truncating text) and aspect ratios, as well as numerous community plugins and supports arbitrary values if you need them.
+
+If you take a look at the [Tailwind CSS documentation](https://tailwindcss.com/docs), you'll definitely find some interesting and useful things.