sangam-ui 0.1.5 → 0.1.6
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 +9 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -88,15 +88,9 @@ Ensure your application satisfies these peer dependencies to avoid warnings or r
|
|
|
88
88
|
|
|
89
89
|
Follow these steps after **React + TypeSCript** Project Setup to wire `sangam-ui` into project.
|
|
90
90
|
|
|
91
|
-
### 5.1
|
|
91
|
+
### 5.1 Configure PostCSS — order matters
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
npx tailwindcss init -p
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
### 5.3 Configure PostCSS — order matters
|
|
98
|
-
|
|
99
|
-
Create or update `postcss.config.cjs`. The `postcss-import` plugin **must come first** so `@import` rules are inlined before Tailwind processes the CSS stream:
|
|
93
|
+
**At your project root**, create a `postcss.config.cjs` file. The `postcss-import` plugin **must come first** so `@import` rules are inlined before Tailwind processes the CSS stream:
|
|
100
94
|
|
|
101
95
|
```js
|
|
102
96
|
// postcss.config.cjs
|
|
@@ -109,9 +103,9 @@ module.exports = {
|
|
|
109
103
|
};
|
|
110
104
|
```
|
|
111
105
|
|
|
112
|
-
### 5.
|
|
106
|
+
### 5.2 Configure Tailwind — use the Sangam preset
|
|
113
107
|
|
|
114
|
-
|
|
108
|
+
Create `tailwind.config.cjs` to spread the Sangam preset and include component class paths:
|
|
115
109
|
|
|
116
110
|
```js
|
|
117
111
|
// tailwind.config.cjs
|
|
@@ -124,14 +118,14 @@ module.exports = {
|
|
|
124
118
|
...sangamTailwind.content,
|
|
125
119
|
"./index.html",
|
|
126
120
|
"./src/**/*.{ts,tsx}",
|
|
127
|
-
"./node_modules/
|
|
121
|
+
"./node_modules/sangam-ui/dist/**/*.{js,mjs}",
|
|
128
122
|
],
|
|
129
123
|
};
|
|
130
124
|
```
|
|
131
125
|
|
|
132
126
|
Spreading `...sangamTailwind` gives you the Sangam theme (colors, spacing, radii, shadows), `darkMode` setting, and any plugins — without having to duplicate them.
|
|
133
127
|
|
|
134
|
-
### 5.
|
|
128
|
+
### 5.3 Wire styles — single CSS entry file
|
|
135
129
|
|
|
136
130
|
Use **one** main CSS file as the Tailwind entry (e.g. `src/index.css`). The `@import` must appear **before** the `@tailwind` directives:
|
|
137
131
|
|
|
@@ -149,7 +143,7 @@ Use **one** main CSS file as the Tailwind entry (e.g. `src/index.css`). The `@im
|
|
|
149
143
|
> - Putting `@tailwind` before `@import` → build error: _"@import must precede all other statements"_
|
|
150
144
|
> - Importing individual Sangam CSS files (e.g. `theme.css`, `dark.css`) directly in `main.tsx` → each file is a separate PostCSS pass, causing _"@layer base used but no matching @tailwind base directive"_ errors
|
|
151
145
|
|
|
152
|
-
### 5.
|
|
146
|
+
### 5.4 App entry — import only your CSS file
|
|
153
147
|
|
|
154
148
|
In `src/main.tsx`, import only your single CSS file. Do **not** import Sangam CSS files directly here:
|
|
155
149
|
|
|
@@ -168,7 +162,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|
|
168
162
|
);
|
|
169
163
|
```
|
|
170
164
|
|
|
171
|
-
### 5.
|
|
165
|
+
### 5.5 Dark theme (optional)
|
|
172
166
|
|
|
173
167
|
To support dark mode, add the dark theme import inside `src/index.css`:
|
|
174
168
|
|
|
@@ -188,7 +182,7 @@ Toggle dark mode at runtime by adding or removing the `dark` class on `<html>`:
|
|
|
188
182
|
document.documentElement.classList.toggle("dark");
|
|
189
183
|
```
|
|
190
184
|
|
|
191
|
-
### 5.
|
|
185
|
+
### 5.6 Setup checklist
|
|
192
186
|
|
|
193
187
|
| Step | Action |
|
|
194
188
|
| ---- | ------------------------------------------------------------------------------------------------------------------------- |
|