From 92ce16b92ebde6a8ae5ac48d072e9ae757273c60 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 25 Mar 2025 16:09:21 +0100 Subject: [PATCH] =?UTF-8?q?document=20literal=20values=20in=20`--value('?= =?UTF-8?q?=E2=80=A6')`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/docs/adding-custom-styles.mdx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/docs/adding-custom-styles.mdx b/src/docs/adding-custom-styles.mdx index a85fd795f..cc19aa96b 100644 --- a/src/docs/adding-custom-styles.mdx +++ b/src/docs/adding-custom-styles.mdx @@ -392,6 +392,19 @@ To resolve the value as a bare value, use the `--value({type})` syntax, where `{ This will match utilities like `tab-1` and `tab-76`. +#### Literal values + +To support literal values, use the `--value('literal')` syntax (notice the quotes): + +```css +/* [!code filename:CSS] */ +@utility tab-* { + tab-size: --value('inherit', 'initial', 'unset'); +} +``` + +This will match utilities like `tab-inherit`, `tab-initial`, and `tab-unset`. + #### Arbitrary values To support arbitrary values, use the `--value([{type}])` syntax (notice the square brackets) to tell Tailwind which types are supported as an arbitrary value: