Styling with Tailwind and DaisyUI

Use & Configure Tailwind & DaisyUI

12 snippets

27 mins

v.18.1.2

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Tailwind

We love Tailwind and we'll use it to style the whole application.

To know more about styling in Angular and Tailwind read the Angular Basics Book

So let's install it:

src/app.component.ts

Or, if you prefer to use the exact versions we used in this book, you can specify them.

src/app.component.ts

Tailwind Configuration File

Run this command to generate a tailwind.config.ts file in the root of your project:

src/app.component.ts

Open the tailwind.config.ts and add the content path:

tailwind.config.ts

Open styles.css and make the Tailwind utilities globally available:

styles.css

The whole procedure is also described in the official Tailwind documentation

Problems with Visual Studio Code?

Read the article How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code

# Daisy UI

We can say that DaisyUI it's just like Bootstrap... but for Tailwind. It offers several classes to create nice buttons, cards, carousel and so on...

terminal

Add Daisy plugin to Tailwind configuration:

tailwind.config.js

In the next video you can see the whole Tailwind and Daisy UI installation process.

no audio

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

Styling with Tailwind and DaisyUI

Use & Configure Tailwind & DaisyUI

12 snippets

27 mins

v.18.1.2

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Tailwind

We love Tailwind and we'll use it to style the whole application.

To know more about styling in Angular and Tailwind read the Angular Basics Book

So let's install it:

src/app.component.ts

Or, if you prefer to use the exact versions we used in this book, you can specify them.

src/app.component.ts

Tailwind Configuration File

Run this command to generate a tailwind.config.ts file in the root of your project:

src/app.component.ts

Open the tailwind.config.ts and add the content path:

tailwind.config.ts

Open styles.css and make the Tailwind utilities globally available:

styles.css

The whole procedure is also described in the official Tailwind documentation

Problems with Visual Studio Code?

Read the article How to fix Unknown at rule @tailwindcss (unknownAtRules) in VS Code

# Daisy UI

We can say that DaisyUI it's just like Bootstrap... but for Tailwind. It offers several classes to create nice buttons, cards, carousel and so on...

terminal

Add Daisy plugin to Tailwind configuration:

tailwind.config.js

In the next video you can see the whole Tailwind and Daisy UI installation process.

no audio

Angular Cookbook

Send your feedback

Angular Cookbook

# Tailwind

Tailwind Configuration File

# Daisy UI

# Improve NavBar Component Layout

Send your feedback

# Tailwind

Tailwind Configuration File

# Daisy UI

# Improve NavBar Component Layout

# Max Screen Content

# Bonus: Simulate Color Theme with Chrome Dev Tools

# Interactive Demo & Source Code: