authhero 0.108.0 → 0.109.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -0
- package/dist/authhero.cjs +48 -48
- package/dist/authhero.d.ts +177 -1
- package/dist/authhero.mjs +4538 -4515
- package/dist/tailwind.css +1 -0
- package/package.json +12 -2
package/README.md
CHANGED
|
@@ -81,3 +81,52 @@ Contributions are welcome! Feel free to open issues and submit pull requests to
|
|
|
81
81
|
## License
|
|
82
82
|
|
|
83
83
|
Authhero is open-source and available under the MIT License.
|
|
84
|
+
|
|
85
|
+
## Using Tailwind CSS with authhero components
|
|
86
|
+
|
|
87
|
+
There are two ways to use the Tailwind CSS styles with authhero components:
|
|
88
|
+
|
|
89
|
+
### 1. Import the CSS file (for environments with filesystem access)
|
|
90
|
+
|
|
91
|
+
```js
|
|
92
|
+
// Import the CSS
|
|
93
|
+
import 'authhero/styles';
|
|
94
|
+
|
|
95
|
+
// Then use the components
|
|
96
|
+
import { Button, Form } from 'authhero';
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### 2. Inject CSS programmatically (for Cloudflare Workers and similar environments)
|
|
100
|
+
|
|
101
|
+
For environments that don't support filesystem access, you can inject the CSS programmatically:
|
|
102
|
+
|
|
103
|
+
```js
|
|
104
|
+
// Import the helper function
|
|
105
|
+
import { injectTailwindCSS } from 'authhero';
|
|
106
|
+
|
|
107
|
+
// Call this function once to inject the CSS into the document
|
|
108
|
+
injectTailwindCSS();
|
|
109
|
+
|
|
110
|
+
// Then use the components
|
|
111
|
+
import { Button, Form } from 'authhero';
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
You can also access the raw CSS string:
|
|
115
|
+
|
|
116
|
+
```js
|
|
117
|
+
import { tailwindCss } from 'authhero';
|
|
118
|
+
|
|
119
|
+
// Use the CSS string as needed
|
|
120
|
+
// For example, in a Cloudflare Worker:
|
|
121
|
+
const html = `
|
|
122
|
+
<!DOCTYPE html>
|
|
123
|
+
<html>
|
|
124
|
+
<head>
|
|
125
|
+
<style>${tailwindCss}</style>
|
|
126
|
+
</head>
|
|
127
|
+
<body>
|
|
128
|
+
<!-- Your content -->
|
|
129
|
+
</body>
|
|
130
|
+
</html>
|
|
131
|
+
`;
|
|
132
|
+
```
|