@quinnjr/ngx-tailwindcss 1.0.1 → 1.1.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/LICENSE +1 -1
- package/README.md +20 -12
- package/fesm2022/quinnjr-ngx-tailwindcss.mjs +6077 -11986
- package/fesm2022/quinnjr-ngx-tailwindcss.mjs.map +1 -1
- package/package.json +10 -6
- package/src/lib/styles/theme.css +24 -6
- package/types/quinnjr-ngx-tailwindcss.d.ts +1039 -569
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @quinnjr/ngx-tailwindcss
|
|
2
2
|
|
|
3
3
|
A highly customizable Angular component library designed for **Tailwind CSS 4+**. This library provides beautiful, accessible UI components that leverage Tailwind's utility-first approach while giving you complete control over styling.
|
|
4
4
|
|
|
@@ -7,16 +7,16 @@ A highly customizable Angular component library designed for **Tailwind CSS 4+**
|
|
|
7
7
|
- 🎨 **Fully Customizable** - Override any styling through class props or global configuration
|
|
8
8
|
- 🌊 **Tailwind CSS 4+ Ready** - Built for the latest Tailwind with CSS-first configuration
|
|
9
9
|
- ♿ **Accessible** - WCAG compliant with proper ARIA attributes and keyboard navigation
|
|
10
|
-
- 📦 **Tree-Shakeable** -
|
|
10
|
+
- 📦 **Tree-Shakeable** - Standalone components can be imported individually, so bundlers keep only what you use
|
|
11
11
|
- 🔧 **No Bundled CSS** - Your Tailwind config, your rules
|
|
12
12
|
- ⚡ **Standalone Components** - No NgModule required, works with Angular 19+
|
|
13
13
|
|
|
14
14
|
## Installation
|
|
15
15
|
|
|
16
16
|
```bash
|
|
17
|
-
pnpm add @
|
|
17
|
+
pnpm add @quinnjr/ngx-tailwindcss
|
|
18
18
|
# or
|
|
19
|
-
npm install @
|
|
19
|
+
npm install @quinnjr/ngx-tailwindcss
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
### Peer Dependencies
|
|
@@ -39,7 +39,7 @@ Add the library's component templates to your Tailwind content configuration so
|
|
|
39
39
|
/* app.css or styles.css */
|
|
40
40
|
@import "tailwindcss";
|
|
41
41
|
|
|
42
|
-
@source "../node_modules/@
|
|
42
|
+
@source "../node_modules/@quinnjr/ngx-tailwindcss/**/*.{js,mjs}";
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
**For Tailwind CSS 3.x (tailwind.config.js):**
|
|
@@ -49,7 +49,7 @@ Add the library's component templates to your Tailwind content configuration so
|
|
|
49
49
|
module.exports = {
|
|
50
50
|
content: [
|
|
51
51
|
"./src/**/*.{html,ts}",
|
|
52
|
-
"./node_modules/@
|
|
52
|
+
"./node_modules/@quinnjr/ngx-tailwindcss/**/*.{js,mjs}",
|
|
53
53
|
],
|
|
54
54
|
// ... rest of your config
|
|
55
55
|
};
|
|
@@ -65,7 +65,7 @@ import {
|
|
|
65
65
|
TwButtonComponent,
|
|
66
66
|
TwCardComponent,
|
|
67
67
|
TwCardBodyDirective
|
|
68
|
-
} from '@
|
|
68
|
+
} from '@quinnjr/ngx-tailwindcss';
|
|
69
69
|
|
|
70
70
|
@Component({
|
|
71
71
|
selector: 'app-example',
|
|
@@ -85,7 +85,7 @@ export class ExampleComponent {}
|
|
|
85
85
|
Or import everything at once:
|
|
86
86
|
|
|
87
87
|
```typescript
|
|
88
|
-
import { TW_ALL } from '@
|
|
88
|
+
import { TW_ALL } from '@quinnjr/ngx-tailwindcss';
|
|
89
89
|
|
|
90
90
|
@Component({
|
|
91
91
|
imports: [...TW_ALL],
|
|
@@ -100,7 +100,7 @@ Customize default styles and behavior globally:
|
|
|
100
100
|
```typescript
|
|
101
101
|
// app.config.ts
|
|
102
102
|
import { ApplicationConfig } from '@angular/core';
|
|
103
|
-
import { provideTwConfig } from '@
|
|
103
|
+
import { provideTwConfig } from '@quinnjr/ngx-tailwindcss';
|
|
104
104
|
|
|
105
105
|
export const appConfig: ApplicationConfig = {
|
|
106
106
|
providers: [
|
|
@@ -183,7 +183,7 @@ export const appConfig: ApplicationConfig = {
|
|
|
183
183
|
<tw-badge variant="success">Active</tw-badge>
|
|
184
184
|
<tw-badge variant="warning" badgeStyle="soft">Pending</tw-badge>
|
|
185
185
|
<tw-badge variant="danger" badgeStyle="dot">Offline</tw-badge>
|
|
186
|
-
<tw-badge variant="info" [pill]="true" [removable]="true"
|
|
186
|
+
<tw-badge variant="info" [pill]="true" [removable]="true" (remove)="onRemove()">
|
|
187
187
|
Tag
|
|
188
188
|
</tw-badge>
|
|
189
189
|
```
|
|
@@ -297,8 +297,12 @@ export const appConfig: ApplicationConfig = {
|
|
|
297
297
|
</div>
|
|
298
298
|
```
|
|
299
299
|
|
|
300
|
+
Conflict resolution is a lightweight, tailwind-merge-style approximation: it handles common utility conflicts (spacing, colors, sizing, and the like) but does not cover every Tailwind edge case — see the docs for details.
|
|
301
|
+
|
|
300
302
|
## Customization Examples
|
|
301
303
|
|
|
304
|
+
`classOverride` is available on most components; `classReplace` is currently supported on `tw-button` and `tw-card` only.
|
|
305
|
+
|
|
302
306
|
### Per-Component Override
|
|
303
307
|
|
|
304
308
|
```html
|
|
@@ -320,7 +324,7 @@ export const appConfig: ApplicationConfig = {
|
|
|
320
324
|
### Using the Class Service
|
|
321
325
|
|
|
322
326
|
```typescript
|
|
323
|
-
import { TwClassService } from '@
|
|
327
|
+
import { TwClassService } from '@quinnjr/ngx-tailwindcss';
|
|
324
328
|
|
|
325
329
|
@Component({...})
|
|
326
330
|
export class MyComponent {
|
|
@@ -336,7 +340,11 @@ export class MyComponent {
|
|
|
336
340
|
}
|
|
337
341
|
```
|
|
338
342
|
|
|
343
|
+
## Development
|
|
344
|
+
|
|
345
|
+
Installing dependencies no longer builds the library automatically — run `pnpm run build` before starting the docs app (or anything else that consumes `dist/ngx-tailwindcss`).
|
|
346
|
+
|
|
339
347
|
## License
|
|
340
348
|
|
|
341
|
-
MIT ©
|
|
349
|
+
MIT © Joseph R Quinn
|
|
342
350
|
|