Tailwind CSS Typography with Angular

Use our Tailwind CSS Typography built with Angular to maintain consistency in the display and styling of text.

The Typography refers to the component that have predefined font sizes, weights, line heights, and other typographic properties to represent headers, subheaders, body text, captions, and more. It involves the selection of typefaces, point size, line length, leading (line spacing), and kerning (adjusting the space between characters).

Check out our Angular Typography example, meticulously designed with Tailwind CSS, ensuring that content is accessible and legible across devices and screen sizes.

You first need to import the DUITypography Module into your application module

     import { DUITypography } from "david-ui-angular";
 
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, DUITypography],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}

David UI Angular

David UI Angular is an easy to use components library for Tailwind CSS and Angular. It provides a simple way to customize your components, you can change the colors, fonts, breakpoints and everything you need.

      
  <dui-typography variant="h1">David UI Angular</dui-typography>
  <dui-typography variant="h2">David UI Angular</dui-typography>
  <dui-typography variant="h3">David UI Angular</dui-typography>
  <dui-typography variant="h4">David UI Angular</dui-typography>
  <dui-typography variant="h5">David UI Angular</dui-typography>
  <dui-typography variant="h6">David UI Angular</dui-typography>
  <dui-typography variant="lead">
    David UI Angular is an easy to use components library for Tailwind CSS
    and Angular. It provides a simple way to customize your
    components, you can change the colors, fonts, breakpoints and everything
    you need.
  </dui-typography>
  <dui-typography variant="paragraph">
    David UI Angular is an easy to use components library for Tailwind CSS
    and Angular. It provides a simple way to customize your
    components, you can change the colors, fonts, breakpoints and everything
    you need.
  </dui-typography>
  <dui-typography variant="small">
    David UI Angular is an easy to use components library for Tailwind CSS
    and Angular. It provides a simple way to customize your
    components, you can change the colors, fonts, breakpoints and everything
    you need.
  </dui-typography>

Typography Colors

You can use different colors of the typography component by manipulating the color attribute of the component

David UI Angular

     
  <dui-typography variant="h1" color="black">David UI Angular</dui-typography>  
  <dui-typography variant="h2" color="red">David UI Angular</dui-typography>
  <dui-typography variant="h3" color="yellow">David UI Angular</dui-typography>
  <dui-typography variant="h4" color="green">David UI Angular</dui-typography>

Typography Gradient

You can change the Typography text color into a gradient color using the textGradient prop.

David UI Angular

     
  <div>
    <dui-typography color="blue" variant="h1" [textGradient]="true">
    David UI Angular
    </dui-typography>
  </div>

Typography Properties

The following properties are available for dui-typography component. These are the custom properties that we've added for the typography component and you can use all the other native properties as well.

Attribute	Type	Description	Default
`variant`	`Variant`	change typography variant	`paragraph`
`color`	`Color`	change typography color	`inherit`
`className`	`string`	Add custom className for typography	`''`
`textGradient`	`boolean`	Change typography size	`false`

Type - Variant

     
  type variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'lead' | 'paragraph' | 'small'

Type - Color

     type colors = 'inherit' | 'current' | 'black' | 'white'
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

	import { DUITypography } from "david-ui-angular";

	@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, DUITypography],
	providers: [],
	bootstrap: [AppComponent],
	})
	export class AppModule {}


	<dui-typography variant="h1">David UI Angular</dui-typography>
	<dui-typography variant="h2">David UI Angular</dui-typography>
	<dui-typography variant="h3">David UI Angular</dui-typography>
	<dui-typography variant="h4">David UI Angular</dui-typography>
	<dui-typography variant="h5">David UI Angular</dui-typography>
	<dui-typography variant="h6">David UI Angular</dui-typography>
	<dui-typography variant="lead">
	David UI Angular is an easy to use components library for Tailwind CSS
	and Angular. It provides a simple way to customize your
	components, you can change the colors, fonts, breakpoints and everything
	you need.
	</dui-typography>
	<dui-typography variant="paragraph">
	David UI Angular is an easy to use components library for Tailwind CSS
	and Angular. It provides a simple way to customize your
	components, you can change the colors, fonts, breakpoints and everything
	you need.
	</dui-typography>
	<dui-typography variant="small">
	David UI Angular is an easy to use components library for Tailwind CSS
	and Angular. It provides a simple way to customize your
	components, you can change the colors, fonts, breakpoints and everything
	you need.
	</dui-typography>


	<dui-typography variant="h1" color="black">David UI Angular</dui-typography>
	<dui-typography variant="h2" color="red">David UI Angular</dui-typography>
	<dui-typography variant="h3" color="yellow">David UI Angular</dui-typography>
	<dui-typography variant="h4" color="green">David UI Angular</dui-typography>


	<div>
	<dui-typography color="blue" variant="h1" [textGradient]="true">
	David UI Angular
	</dui-typography>
	</div>


	type variant = 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'lead' \| 'paragraph' \| 'small'

	type colors = 'inherit' \| 'current' \| 'black' \| 'white'
	\| "blue-gray"
	\| "gray"
	\| "brown"
	\| "deep-orange"
	\| "orange"
	\| "amber"
	\| "yellow"
	\| "lime"
	\| "light-green"
	\| "green"
	\| "teal"
	\| "cyan"
	\| "light-blue"
	\| "blue"
	\| "indigo"
	\| "deep-purple"
	\| "purple"
	\| "pink"
	\| "red";