tailwind-styled-components - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dist/tailwind.d.ts

@@ -15,6 +15,6 @@ import React from "react";
     <As extends IntrinsicElementsKeys>(props: P & {
-        $as: As;
+        $as?: As;
     } & JSX.IntrinsicElements[As]): React.ReactElement<any> | null;
     <P2 extends {}>(props: P & {
-        $as: React.ComponentType<P2>;
+        $as?: React.ComponentType<P2>;
     } & NoInfer<P2>): React.ReactElement<any> | null;
@@ -21,0 +21,0 @@ }

package.json

 {
     "name": "tailwind-styled-components",
-    "version": "2.1.1",
+    "version": "2.1.2",
     "keywords": [
@@ -5,0 +5,0 @@ "react",

README.md

@@ -234,2 +234,18 @@ # Tailwind-Styled-Component
 
+### Polymorphic Components
+
+If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the `$as` prop to do this at runtime.
+
+```js
+const Button = tw.button`inline-flex items-center p-2`
+
+<Button $as="a" href="#">Link</Button>
+```
+
+Will render as
+
+```html
+<a href="#" class="inline-flex items-center p-2">Link</a>
+```
+
 ## Example
@@ -236,0 +252,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38067

increased by1.21%

Number of lines in readme file

290

increased by5.84%

No dependency changes