diff --git a/website/src/daily-emails/2023-01-21.md b/website/src/daily-emails/2023-01-21.md new file mode 100644 index 00000000..e9fa86a8 --- /dev/null +++ b/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.