oliverdavies.uk/source/_daily_emails/2023-01-21.md

21 lines
1.5 KiB
Markdown
Raw Normal View History

2024-01-03 20:00:00 +00:00
---
title: >
2024-02-07 20:01:19 +00:00
Tailwind: Not just translating CSS to utility classes
2024-01-03 20:00:00 +00:00
pubDate: 2023-01-21
permalink: >-
2024-02-07 20:01:19 +00:00
archive/2023/01/21/tailwind-not-just-translating-css-to-utility-classes
2024-01-03 20:00:00 +00:00
tags:
2024-02-07 20:01:19 +00:00
- css
- tailwind-css
2024-01-03 20:00:00 +00:00
---
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.