David UI Angular is a comprehensive Angular framework that leverages the power of Tailwind CSS to provide a rich set of UI components, making it easy to build stylish web applications.
Learn how to use david-ui-angular
components from this documentation to quickly and easily create elegant and flexible pages using Tailwind CSS.
To get started with David UI Angular, simply install it via npm or yarn.
Code
npm install david-ui-angular // or yarn add david-ui-angular
In your project's styles.css or styles.scss, import David UI Angular's styles along with Tailwind CSS and you also need to import the @angular/cdk styles:
Code
<!-- Add this to your styles.scss file --> @import "<path-to-node_modules>/david-ui-angular/styles/_styles.scss"; @import "@angular/cdk/overlay-prebuilt.css";
OR
You can add the link of style sheet in your angular.json style's list
Code
// Add this to your angular.json file "styles": [ "src/styles.scss", "./node_modules/david-ui-angular/styles/_styles.scss" ],
Import the david-ui-angular modules into your app.module.ts file.
Code
// e.g Button Module, add this to your app.module.ts file import { DUIButton } from "david-ui-angular"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, DUIButton], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
then you can import and use the component in your html file like shown below.
Code
<!-- e.g Button Component, add this to your app.component.html file --> <dui-button>Click Me</dui-button>
After this you need to add below line into the content array of you tailwind.config.js file
Code
// add below line into the content array of your tailwind.config.js file "./node_modules/david-ui-angular/**/*.{html,ts,js,mjs}"