sangam-ui 0.1.5 → 0.1.7
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 +12 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -88,30 +88,26 @@ 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
|
-
|
|
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
|
+
> [!IMPORTANT]
|
|
94
|
+
> At your **project root**, create a `postcss.config.cjs` file. The `postcss-import` plugin **must come first** — if the order is wrong, Tailwind will error with _"@import must precede all other statements"_ or _"@layer base used but no matching @tailwind base directive"_.
|
|
100
95
|
|
|
101
96
|
```js
|
|
102
97
|
// postcss.config.cjs
|
|
103
98
|
module.exports = {
|
|
104
99
|
plugins: {
|
|
105
|
-
"postcss-import": {}, //
|
|
100
|
+
"postcss-import": {}, // MUST be first: inlines @import before Tailwind sees the file
|
|
106
101
|
tailwindcss: {},
|
|
107
102
|
autoprefixer: {},
|
|
108
103
|
},
|
|
109
104
|
};
|
|
110
105
|
```
|
|
111
106
|
|
|
112
|
-
### 5.
|
|
107
|
+
### 5.2 Configure Tailwind — use the Sangam preset
|
|
113
108
|
|
|
114
|
-
|
|
109
|
+
> [!IMPORTANT]
|
|
110
|
+
> At your **project root**, Always spread `...sangamTailwind` and extend its `content` array — **never replace it**. Replacing it strips the Sangam theme (colors, spacing, radii, shadows, darkMode) and component class paths, causing broken styles.
|
|
115
111
|
|
|
116
112
|
```js
|
|
117
113
|
// tailwind.config.cjs
|
|
@@ -124,14 +120,14 @@ module.exports = {
|
|
|
124
120
|
...sangamTailwind.content,
|
|
125
121
|
"./index.html",
|
|
126
122
|
"./src/**/*.{ts,tsx}",
|
|
127
|
-
"./node_modules/
|
|
123
|
+
"./node_modules/sangam-ui/dist/**/*.{js,mjs}",
|
|
128
124
|
],
|
|
129
125
|
};
|
|
130
126
|
```
|
|
131
127
|
|
|
132
128
|
Spreading `...sangamTailwind` gives you the Sangam theme (colors, spacing, radii, shadows), `darkMode` setting, and any plugins — without having to duplicate them.
|
|
133
129
|
|
|
134
|
-
### 5.
|
|
130
|
+
### 5.3 Wire styles — single CSS entry file
|
|
135
131
|
|
|
136
132
|
Use **one** main CSS file as the Tailwind entry (e.g. `src/index.css`). The `@import` must appear **before** the `@tailwind` directives:
|
|
137
133
|
|
|
@@ -149,7 +145,7 @@ Use **one** main CSS file as the Tailwind entry (e.g. `src/index.css`). The `@im
|
|
|
149
145
|
> - Putting `@tailwind` before `@import` → build error: _"@import must precede all other statements"_
|
|
150
146
|
> - 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
147
|
|
|
152
|
-
### 5.
|
|
148
|
+
### 5.4 App entry — import only your CSS file
|
|
153
149
|
|
|
154
150
|
In `src/main.tsx`, import only your single CSS file. Do **not** import Sangam CSS files directly here:
|
|
155
151
|
|
|
@@ -168,7 +164,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
|
|
|
168
164
|
);
|
|
169
165
|
```
|
|
170
166
|
|
|
171
|
-
### 5.
|
|
167
|
+
### 5.5 Dark theme (optional)
|
|
172
168
|
|
|
173
169
|
To support dark mode, add the dark theme import inside `src/index.css`:
|
|
174
170
|
|
|
@@ -188,7 +184,7 @@ Toggle dark mode at runtime by adding or removing the `dark` class on `<html>`:
|
|
|
188
184
|
document.documentElement.classList.toggle("dark");
|
|
189
185
|
```
|
|
190
186
|
|
|
191
|
-
### 5.
|
|
187
|
+
### 5.6 Setup checklist
|
|
192
188
|
|
|
193
189
|
| Step | Action |
|
|
194
190
|
| ---- | ------------------------------------------------------------------------------------------------------------------------- |
|