https://github.com/pegasusheavy/ngx-tailwindcss
A highly customizable Angular component library for Tailwind CSS 4+. Build beautiful, accessible UI components with full theming support, intelligent class merging, and zero bundled CSS. Features 30+ components including buttons, cards, modals, forms, tables, and more.
https://github.com/pegasusheavy/ngx-tailwindcss
a11y accessibility accessible angular angular-components angular-library angular-ui component-library components design-system signals standalone-components tailwind tailwind-css-4 tailwindcss theming typescript ui ui-components ui-library
Last synced: 17 days ago
JSON representation
A highly customizable Angular component library for Tailwind CSS 4+. Build beautiful, accessible UI components with full theming support, intelligent class merging, and zero bundled CSS. Features 30+ components including buttons, cards, modals, forms, tables, and more.
- Host: GitHub
- URL: https://github.com/pegasusheavy/ngx-tailwindcss
- Owner: pegasusheavy
- License: mit
- Created: 2025-12-15T15:55:53.000Z (3 months ago)
- Default Branch: develop
- Last Pushed: 2026-02-17T16:40:02.000Z (18 days ago)
- Last Synced: 2026-02-17T20:17:22.092Z (17 days ago)
- Topics: a11y, accessibility, accessible, angular, angular-components, angular-library, angular-ui, component-library, components, design-system, signals, standalone-components, tailwind, tailwind-css-4, tailwindcss, theming, typescript, ui, ui-components, ui-library
- Language: TypeScript
- Homepage: https://pegasusheavy.github.io/ngx-tailwindcss
- Size: 5 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-tailwindcss - A customizable Angular UI library for Tailwind CSS 4+, offering accessible, beautifully designed components with full styling control. (Third Party Components / UI Libraries built on Tailwind CSS)
- awesome-angular - ngx-tailwindcss - A customizable Angular UI library for Tailwind CSS 4+, offering accessible, beautifully designed components with full styling control. (Third Party Components / UI Libraries built on Tailwind CSS)
README
# @pegasus-heavy/ngx-tailwindcss
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.
## Features
- 🎨 **Fully Customizable** - Override any styling through class props or global configuration
- 🌊 **Tailwind CSS 4+ Ready** - Built for the latest Tailwind with CSS-first configuration
- ♿ **Accessible** - WCAG compliant with proper ARIA attributes and keyboard navigation
- 📦 **Tree-Shakeable** - Import only what you need with secondary entry points
- 🔧 **No Bundled CSS** - Your Tailwind config, your rules
- âš¡ **Standalone Components** - No NgModule required, works with Angular 19+
## Installation
```bash
pnpm add @pegasus-heavy/ngx-tailwindcss
# or
npm install @pegasus-heavy/ngx-tailwindcss
```
### Peer Dependencies
```bash
pnpm add @angular/cdk
```
## Tailwind CSS Configuration
This library **does not** import Tailwind CSS directly. You must configure Tailwind in your application.
### 1. Configure Content Paths
Add the library's component templates to your Tailwind content configuration so the PostCSS parser can detect the utility classes used:
**For Tailwind CSS 4+ (CSS-based config):**
```css
/* app.css or styles.css */
@import "tailwindcss";
@source "../node_modules/@pegasus-heavy/ngx-tailwindcss/**/*.{js,mjs}";
```
**For Tailwind CSS 3.x (tailwind.config.js):**
```js
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{html,ts}",
"./node_modules/@pegasus-heavy/ngx-tailwindcss/**/*.{js,mjs}",
],
// ... rest of your config
};
```
### 2. Import Components
Import components directly in your Angular components:
```typescript
import { Component } from '@angular/core';
import {
TwButtonComponent,
TwCardComponent,
TwCardBodyDirective
} from '@pegasus-heavy/ngx-tailwindcss';
@Component({
selector: 'app-example',
standalone: true,
imports: [TwButtonComponent, TwCardComponent, TwCardBodyDirective],
template: `
Click me!
`,
})
export class ExampleComponent {}
```
Or import everything at once:
```typescript
import { TW_ALL } from '@pegasus-heavy/ngx-tailwindcss';
@Component({
imports: [...TW_ALL],
})
export class ExampleComponent {}
```
## Global Configuration
Customize default styles and behavior globally:
```typescript
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideTwConfig } from '@pegasus-heavy/ngx-tailwindcss';
export const appConfig: ApplicationConfig = {
providers: [
provideTwConfig({
theme: {
primary: 'bg-indigo-600 hover:bg-indigo-700 text-white',
secondary: 'bg-purple-600 hover:bg-purple-700 text-white',
// ... customize other variants
},
animationDuration: 300,
}),
],
};
```
## Components
### Button
```html
Default
Primary
Large Danger
Submit
...
```
**Props:**
- `variant`: `'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'ghost' | 'outline' | 'link'`
- `size`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'`
- `disabled`, `loading`, `fullWidth`, `iconOnly`: `boolean`
- `classOverride`: Additional classes to merge
- `classReplace`: Complete class replacement
### Card
```html
Card Title
Subtitle
Content goes here
Action
```
### Input
```html
```
### Badge
```html
Active
Pending
Offline
Tag
```
### Alert
```html
Success!
Your changes have been saved.
An error occurred while processing your request.
```
### Modal
```html
Open Modal
Confirm Action
Are you sure you want to continue?
Cancel
Confirm
```
### Dropdown
```html
Options
Actions
Edit
Duplicate
Delete
```
### Tabs
```html
Overview content
Settings content
Billing content
```
## Directives
### Ripple Effect
```html
Click me
```
### Tooltip
```html
Save
```
### Click Outside
```html
Menu content
```
### Focus Trap
```html
Submit
```
### Class Merge
```html
Will have px-8 py-2 bg-red-500
```
## Customization Examples
### Per-Component Override
```html
Gradient Button
```
### Complete Class Replacement
```html
Custom Styled
```
### Using the Class Service
```typescript
import { TwClassService } from '@pegasus-heavy/ngx-tailwindcss';
@Component({...})
export class MyComponent {
private twClass = inject(TwClassService);
get buttonClasses() {
return this.twClass.merge(
'px-4 py-2 rounded',
this.isPrimary ? 'bg-blue-600 text-white' : 'bg-gray-100',
this.isDisabled && 'opacity-50 cursor-not-allowed'
);
}
}
```
## License
MIT © Pegasus Heavy Industries LLC