Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/william-mba/ngxtw
Tailwind CSS components for Angular. Super easy to use and customize.
https://github.com/william-mba/ngxtw
angular css developer frontend ngxtw tailwind-css tailwindcss tailwindui typescript web webapp webapplication webcomponents
Last synced: 4 months ago
JSON representation
Tailwind CSS components for Angular. Super easy to use and customize.
- Host: GitHub
- URL: https://github.com/william-mba/ngxtw
- Owner: william-mba
- License: apache-2.0
- Created: 2024-05-26T05:30:01.000Z (9 months ago)
- Default Branch: next
- Last Pushed: 2024-10-07T18:31:47.000Z (4 months ago)
- Last Synced: 2024-10-14T02:03:37.629Z (4 months ago)
- Topics: angular, css, developer, frontend, ngxtw, tailwind-css, tailwindcss, tailwindui, typescript, web, webapp, webapplication, webcomponents
- Language: TypeScript
- Homepage: https://ngxtw.williammba.com
- Size: 88.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
The best way to quickly integrate Tailwind CSS components with Angular.
[](https://dev.azure.com/ecologiciel/Lab/_build/latest?definitionId=5&repoName=William-Mba%2Fngxtw&branchName=master)
## Resources
- [Roadmap](https://ngxtw.williammba.com/roadmap)
- [Live demo](https://stackblitz.com/~/github.com/William-Mba/ngxtw)
- [Components docs](https://ngxtw.williammba.com/)
---
## Quick start
### 0. Prerequisites
[Install Tailwind CSS](https://tailwindcss.com/docs/guides/angular) in your Angular project.
### 1. Install NGxTW package
Using npm
```ts
npm install ngxtw
```
Using yarn
```ts
yarn add ngxtw
```
### 2. Modify tailwind.config.js
```js
module.exports = {
...
content: [
...
// add the line bellow
"./node_modules/ngxtw/**/*.{html,ts}"
]
```
### 3. Import NGxTW components
If you are using ``standalone`` components, import our components in your *.component.ts file
```ts
@Component({
standalone: true,
imports: [
...
// Some components
ButtonComponent,
DropdownComponent,
BadgeComponent,
],
...
})
export class DemoComponent {
...
}
```
If you are using ``NgModule`` based components, import our components in your *.module.ts file
```ts
@NgModule({
declarations: [
...
],
imports: [
...
// Some components
ModalDialogModule,
ComboboxModule,
TypographyModule
],
bootstrap: [DemoAppComponent]
})
export class DemoAppModule { }
```
🎉Congratulations! You are all set 🚀
What's next ?
[Visit our website for more details on components](https://ngxtw.williammba.com).
---
#### NOTE
If you imported our forms components, install Tailwind CSS forms plugin.
Install the forms plugin from npm
```ts
npm install -D @tailwindcss/forms
```
Modify tailwind.config.js
```js
module.exports = {
...
plugins: [
// add the line bellow
require('@tailwindcss/forms')
]
}
```
## Give a star ⭐️
Feel free to give a star to this library if you like it.
