{"id":34409654,"url":"https://github.com/pegasusheavy/ngx-tailwindcss","last_synced_at":"2026-02-18T07:34:13.447Z","repository":{"id":328832529,"uuid":"1116947593","full_name":"pegasusheavy/ngx-tailwindcss","owner":"pegasusheavy","description":"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.","archived":false,"fork":false,"pushed_at":"2026-02-17T16:40:02.000Z","size":5248,"stargazers_count":1,"open_issues_count":5,"forks_count":0,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2026-02-17T20:17:22.092Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://pegasusheavy.github.io/ngx-tailwindcss","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pegasusheavy.png","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","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["PegasusHeavyIndustries"]}},"created_at":"2025-12-15T15:55:53.000Z","updated_at":"2026-02-17T16:39:58.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/pegasusheavy/ngx-tailwindcss","commit_stats":null,"previous_names":["pegasusheavy/ngx-tailwindcss"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/pegasusheavy/ngx-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pegasusheavy%2Fngx-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pegasusheavy%2Fngx-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pegasusheavy%2Fngx-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pegasusheavy%2Fngx-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pegasusheavy","download_url":"https://codeload.github.com/pegasusheavy/ngx-tailwindcss/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pegasusheavy%2Fngx-tailwindcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29572464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T06:19:27.422Z","status":"ssl_error","status_checked_at":"2026-02-18T06:18:44.348Z","response_time":162,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-12-20T14:00:51.190Z","updated_at":"2026-02-18T07:34:13.438Z","avatar_url":"https://github.com/pegasusheavy.png","language":"TypeScript","funding_links":["https://github.com/sponsors/PegasusHeavyIndustries"],"categories":["Third Party Components"],"sub_categories":["UI Libraries built on Tailwind CSS"],"readme":"# @pegasus-heavy/ngx-tailwindcss\n\nA 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.\n\n## Features\n\n- 🎨 **Fully Customizable** - Override any styling through class props or global configuration\n- 🌊 **Tailwind CSS 4+ Ready** - Built for the latest Tailwind with CSS-first configuration\n- ♿ **Accessible** - WCAG compliant with proper ARIA attributes and keyboard navigation\n- 📦 **Tree-Shakeable** - Import only what you need with secondary entry points\n- 🔧 **No Bundled CSS** - Your Tailwind config, your rules\n- ⚡ **Standalone Components** - No NgModule required, works with Angular 19+\n\n## Installation\n\n```bash\npnpm add @pegasus-heavy/ngx-tailwindcss\n# or\nnpm install @pegasus-heavy/ngx-tailwindcss\n```\n\n### Peer Dependencies\n\n```bash\npnpm add @angular/cdk\n```\n\n## Tailwind CSS Configuration\n\nThis library **does not** import Tailwind CSS directly. You must configure Tailwind in your application.\n\n### 1. Configure Content Paths\n\nAdd the library's component templates to your Tailwind content configuration so the PostCSS parser can detect the utility classes used:\n\n**For Tailwind CSS 4+ (CSS-based config):**\n\n```css\n/* app.css or styles.css */\n@import \"tailwindcss\";\n\n@source \"../node_modules/@pegasus-heavy/ngx-tailwindcss/**/*.{js,mjs}\";\n```\n\n**For Tailwind CSS 3.x (tailwind.config.js):**\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    \"./src/**/*.{html,ts}\",\n    \"./node_modules/@pegasus-heavy/ngx-tailwindcss/**/*.{js,mjs}\",\n  ],\n  // ... rest of your config\n};\n```\n\n### 2. Import Components\n\nImport components directly in your Angular components:\n\n```typescript\nimport { Component } from '@angular/core';\nimport {\n  TwButtonComponent,\n  TwCardComponent,\n  TwCardBodyDirective\n} from '@pegasus-heavy/ngx-tailwindcss';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [TwButtonComponent, TwCardComponent, TwCardBodyDirective],\n  template: `\n    \u003ctw-card\u003e\n      \u003ctw-card-body\u003e\n        \u003ctw-button variant=\"primary\"\u003eClick me!\u003c/tw-button\u003e\n      \u003c/tw-card-body\u003e\n    \u003c/tw-card\u003e\n  `,\n})\nexport class ExampleComponent {}\n```\n\nOr import everything at once:\n\n```typescript\nimport { TW_ALL } from '@pegasus-heavy/ngx-tailwindcss';\n\n@Component({\n  imports: [...TW_ALL],\n})\nexport class ExampleComponent {}\n```\n\n## Global Configuration\n\nCustomize default styles and behavior globally:\n\n```typescript\n// app.config.ts\nimport { ApplicationConfig } from '@angular/core';\nimport { provideTwConfig } from '@pegasus-heavy/ngx-tailwindcss';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideTwConfig({\n      theme: {\n        primary: 'bg-indigo-600 hover:bg-indigo-700 text-white',\n        secondary: 'bg-purple-600 hover:bg-purple-700 text-white',\n        // ... customize other variants\n      },\n      animationDuration: 300,\n    }),\n  ],\n};\n```\n\n## Components\n\n### Button\n\n```html\n\u003ctw-button\u003eDefault\u003c/tw-button\u003e\n\u003ctw-button variant=\"primary\"\u003ePrimary\u003c/tw-button\u003e\n\u003ctw-button variant=\"danger\" size=\"lg\"\u003eLarge Danger\u003c/tw-button\u003e\n\u003ctw-button variant=\"outline\" [loading]=\"isLoading\"\u003eSubmit\u003c/tw-button\u003e\n\u003ctw-button variant=\"ghost\" [iconOnly]=\"true\"\u003e\n  \u003csvg twButtonIcon\u003e...\u003c/svg\u003e\n\u003c/tw-button\u003e\n```\n\n**Props:**\n- `variant`: `'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'ghost' | 'outline' | 'link'`\n- `size`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'`\n- `disabled`, `loading`, `fullWidth`, `iconOnly`: `boolean`\n- `classOverride`: Additional classes to merge\n- `classReplace`: Complete class replacement\n\n### Card\n\n```html\n\u003ctw-card variant=\"elevated\"\u003e\n  \u003ctw-card-header\u003e\n    \u003ctw-card-title\u003eCard Title\u003c/tw-card-title\u003e\n    \u003ctw-card-subtitle\u003eSubtitle\u003c/tw-card-subtitle\u003e\n  \u003c/tw-card-header\u003e\n  \u003ctw-card-body\u003e\n    Content goes here\n  \u003c/tw-card-body\u003e\n  \u003ctw-card-footer\u003e\n    \u003ctw-button variant=\"primary\"\u003eAction\u003c/tw-button\u003e\n  \u003c/tw-card-footer\u003e\n\u003c/tw-card\u003e\n```\n\n### Input\n\n```html\n\u003ctw-input\n  [(ngModel)]=\"email\"\n  type=\"email\"\n  label=\"Email\"\n  placeholder=\"you@example.com\"\n  hint=\"We'll never share your email\"\n  [error]=\"emailError\"\n  [clearable]=\"true\"\u003e\n\u003c/tw-input\u003e\n\n\u003ctw-textarea\n  [(ngModel)]=\"bio\"\n  label=\"Bio\"\n  [rows]=\"4\"\n  [maxlength]=\"500\"\n  [showCount]=\"true\"\n  [autoResize]=\"true\"\u003e\n\u003c/tw-textarea\u003e\n```\n\n### Badge\n\n```html\n\u003ctw-badge variant=\"success\"\u003eActive\u003c/tw-badge\u003e\n\u003ctw-badge variant=\"warning\" badgeStyle=\"soft\"\u003ePending\u003c/tw-badge\u003e\n\u003ctw-badge variant=\"danger\" badgeStyle=\"dot\"\u003eOffline\u003c/tw-badge\u003e\n\u003ctw-badge variant=\"info\" [pill]=\"true\" [removable]=\"true\" [remove]=\"onRemove\"\u003e\n  Tag\n\u003c/tw-badge\u003e\n```\n\n### Alert\n\n```html\n\u003ctw-alert variant=\"success\" alertStyle=\"soft\" [dismissible]=\"true\"\u003e\n  \u003ctw-alert-title\u003eSuccess!\u003c/tw-alert-title\u003e\n  \u003ctw-alert-description\u003eYour changes have been saved.\u003c/tw-alert-description\u003e\n\u003c/tw-alert\u003e\n\n\u003ctw-alert variant=\"danger\" alertStyle=\"accent\"\u003e\n  An error occurred while processing your request.\n\u003c/tw-alert\u003e\n```\n\n### Modal\n\n```html\n\u003ctw-button (click)=\"isOpen = true\"\u003eOpen Modal\u003c/tw-button\u003e\n\n\u003ctw-modal [(open)]=\"isOpen\" size=\"md\"\u003e\n  \u003ctw-modal-header\u003e\n    \u003ctw-modal-title\u003eConfirm Action\u003c/tw-modal-title\u003e\n  \u003c/tw-modal-header\u003e\n  \u003ctw-modal-body\u003e\n    Are you sure you want to continue?\n  \u003c/tw-modal-body\u003e\n  \u003ctw-modal-footer\u003e\n    \u003ctw-button variant=\"ghost\" (click)=\"isOpen = false\"\u003eCancel\u003c/tw-button\u003e\n    \u003ctw-button variant=\"primary\" (click)=\"confirm()\"\u003eConfirm\u003c/tw-button\u003e\n  \u003c/tw-modal-footer\u003e\n\u003c/tw-modal\u003e\n```\n\n### Dropdown\n\n```html\n\u003ctw-dropdown\u003e\n  \u003cbutton twDropdownTrigger class=\"px-4 py-2 bg-white border rounded-lg\"\u003e\n    Options\n  \u003c/button\u003e\n  \u003ctw-dropdown-menu\u003e\n    \u003ctw-dropdown-header\u003eActions\u003c/tw-dropdown-header\u003e\n    \u003cbutton twDropdownItem (click)=\"edit()\"\u003eEdit\u003c/button\u003e\n    \u003cbutton twDropdownItem (click)=\"duplicate()\"\u003eDuplicate\u003c/button\u003e\n    \u003ctw-dropdown-divider\u003e\u003c/tw-dropdown-divider\u003e\n    \u003cbutton twDropdownItem class=\"text-rose-600\"\u003eDelete\u003c/button\u003e\n  \u003c/tw-dropdown-menu\u003e\n\u003c/tw-dropdown\u003e\n```\n\n### Tabs\n\n```html\n\u003ctw-tabs [(value)]=\"activeTab\" variant=\"line\"\u003e\n  \u003ctw-tab-panel value=\"overview\" label=\"Overview\"\u003e\n    Overview content\n  \u003c/tw-tab-panel\u003e\n  \u003ctw-tab-panel value=\"settings\" label=\"Settings\"\u003e\n    Settings content\n  \u003c/tw-tab-panel\u003e\n  \u003ctw-tab-panel value=\"billing\" label=\"Billing\" [disabled]=\"!isPremium\"\u003e\n    Billing content\n  \u003c/tw-tab-panel\u003e\n\u003c/tw-tabs\u003e\n```\n\n## Directives\n\n### Ripple Effect\n\n```html\n\u003cbutton twRipple class=\"px-4 py-2 bg-blue-600 text-white rounded\"\u003e\n  Click me\n\u003c/button\u003e\n```\n\n### Tooltip\n\n```html\n\u003cbutton twTooltip=\"Save changes\" tooltipPosition=\"top\"\u003e\n  Save\n\u003c/button\u003e\n```\n\n### Click Outside\n\n```html\n\u003cdiv (twClickOutside)=\"closeMenu()\" [clickOutsideEnabled]=\"isMenuOpen\"\u003e\n  Menu content\n\u003c/div\u003e\n```\n\n### Focus Trap\n\n```html\n\u003cdiv twFocusTrap [focusTrapAutoFocus]=\"true\"\u003e\n  \u003cinput type=\"text\"\u003e\n  \u003cbutton\u003eSubmit\u003c/button\u003e\n\u003c/div\u003e\n```\n\n### Class Merge\n\n```html\n\u003c!-- Intelligently merges Tailwind classes, resolving conflicts --\u003e\n\u003cdiv [twClass]=\"'px-4 py-2 bg-blue-500'\" [twClassMerge]=\"'px-8 bg-red-500'\"\u003e\n  Will have px-8 py-2 bg-red-500\n\u003c/div\u003e\n```\n\n## Customization Examples\n\n### Per-Component Override\n\n```html\n\u003ctw-button\n  variant=\"primary\"\n  classOverride=\"bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600\"\u003e\n  Gradient Button\n\u003c/tw-button\u003e\n```\n\n### Complete Class Replacement\n\n```html\n\u003ctw-button classReplace=\"your-completely-custom-classes\"\u003e\n  Custom Styled\n\u003c/tw-button\u003e\n```\n\n### Using the Class Service\n\n```typescript\nimport { TwClassService } from '@pegasus-heavy/ngx-tailwindcss';\n\n@Component({...})\nexport class MyComponent {\n  private twClass = inject(TwClassService);\n\n  get buttonClasses() {\n    return this.twClass.merge(\n      'px-4 py-2 rounded',\n      this.isPrimary ? 'bg-blue-600 text-white' : 'bg-gray-100',\n      this.isDisabled \u0026\u0026 'opacity-50 cursor-not-allowed'\n    );\n  }\n}\n```\n\n## License\n\nMIT © Pegasus Heavy Industries LLC\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpegasusheavy%2Fngx-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpegasusheavy%2Fngx-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpegasusheavy%2Fngx-tailwindcss/lists"}