@moondreamsdev/dreamer-ui 1.7.8 → 1.7.9
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 +8 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,7 +29,7 @@ or, if the above command fails:
|
|
|
29
29
|
And, finally, install the stylesheets in main CSS file (recommended):
|
|
30
30
|
|
|
31
31
|
```css
|
|
32
|
-
@import
|
|
32
|
+
@import '@moondreamsdev/dreamer-ui/styles'; /* non-TailwindCSS styles */
|
|
33
33
|
@import './dreamer-ui.css'; /* customizable, theme styles */
|
|
34
34
|
|
|
35
35
|
/* other styles */
|
|
@@ -40,17 +40,17 @@ And, finally, install the stylesheets in main CSS file (recommended):
|
|
|
40
40
|
|
|
41
41
|
### Tailwind Class Name Auto-Detection
|
|
42
42
|
|
|
43
|
-
To enable Tailwind CSS IntelliSense for component classnames like `targetClassName`, add the following to your VS Code settings.json:
|
|
43
|
+
To enable Tailwind CSS IntelliSense for component classnames like `targetClassName` and when using `join()`, add the following to your VS Code settings.json:
|
|
44
44
|
|
|
45
45
|
```json
|
|
46
46
|
{
|
|
47
|
-
"tailwindCSS.classAttributes": ["class", "className", ".*ClassName"]
|
|
47
|
+
"tailwindCSS.classAttributes": ["class", "className", ".*ClassName"],
|
|
48
|
+
"tailwindCSS.classFunctions": ["join"]
|
|
48
49
|
}
|
|
49
50
|
```
|
|
50
51
|
|
|
51
52
|
This configuration allows the Tailwind CSS extension to provide autocomplete and validation for any attribute that contains "className" in its name, including custom props like `targetClassName`, `containerClassName`, etc.
|
|
52
53
|
|
|
53
|
-
|
|
54
54
|
## Usage
|
|
55
55
|
|
|
56
56
|
```tsx
|
|
@@ -59,9 +59,9 @@ import { Button, Input, Textarea } from 'dreamer-ui';
|
|
|
59
59
|
function App() {
|
|
60
60
|
return (
|
|
61
61
|
<div>
|
|
62
|
-
<Button variant=
|
|
63
|
-
<Input placeholder=
|
|
64
|
-
<Textarea placeholder=
|
|
62
|
+
<Button variant='primary'>Click me</Button>
|
|
63
|
+
<Input placeholder='Enter text' />
|
|
64
|
+
<Textarea placeholder='Enter message' />
|
|
65
65
|
</div>
|
|
66
66
|
);
|
|
67
67
|
}
|
|
@@ -87,4 +87,4 @@ Contributions are welcome! Please read our contributing guidelines.
|
|
|
87
87
|
|
|
88
88
|
## License
|
|
89
89
|
|
|
90
|
-
MIT
|
|
90
|
+
MIT
|