Add tailwind v4 example (#37)

typicode · Apr 1, 2024 · 31ab917 · 31ab917
1 parent 62d1d5d
commit 31ab917
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -78,6 +78,28 @@ Let's create a classic `Button` component accepting two props:
   }
 }
 ```
+```css [CSS + Tailwind V4]
+@scope (.button) {
+  button:scope {
+    /* Default style */
+    font-size: theme(fontSize.base);
+    border-radius: theme(borderRadius.sm);
+
+    &[data-size='lg'] {
+      font-size: theme(fontSize.lg);
+    }
+
+    &[data-size='sm'] {
+      font-size: theme(fontSize.sm);
+    }
+
+    &[data-danger] {
+      background-color: theme(colors.red.700);
+      color: theme(colors.white);
+    }
+  }
+}
+```
 
 :::