Loading...
FREE
Angular Cookbook
Author
Change Log
Help
Create a new Angular v.20 project
Angular Fundamentals
Exercise
Solution
Angular Signals
Exercise
Solution
Cheatsheet
Linked Signals
Angular Resource API (v.20.1)
Angular Resourse API (v.19 - deprecated)
Angular Styling
Encapsulation
Demo: create a tooltip
Cheatsheet
Animations (v.20+)
Control Flow blocks
@if block
@switch block
@for block
Demo: Create a Todo List
Http Client
Demo: CRUD Todo List
httpResource API (v.20.1)
HttpResource (v.19 deprecated)
Components
Anatomy of Components
From Static To Components
Reusable Components
Dynamic content with REST API
Angular Router
Router & Lazy Loading in Angular
Styling with Tailwind and DaisyUI
Signal Forms (Angular 21 Experimental)
Angular Signals Forms (experimental)
Write a Review
Your Certificate
Loading...
Topics
Courses
Bookmarks
there are no topics
Home
•
Courses
•
Login
•
Register
Send your feedback
feedback?
// ARROW TOP for DARK THEME
// ARROW TOP for light THEME// ARROW LINE for DARK THEME
// ARROW LINE for LIGHT THEME
Styling with Tailwind and DaisyUI
Use & Configure Tailwind & DaisyUI
9
snippets
21
mins
v.20.x
Fabio Biondi
Google Expert | Angular
#
Tailwind v. 4.x
We love
Tailwind
and we'll use it to style the whole application.
To know more about styling in Angular and Tailwind read the
Styling Chapter
So let's install it:
Terminal
Create a
.postcssrc.json
file in the root of your project and add the
@tailwindcss/postcss
plugin to your PostCSS configuration.
.postcssrc.json
Add an
@import
to
./src/styles.css
that imports Tailwind CSS.
styles.css
The whole procedure is also described in the
official Tailwind documentation
#
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 DaisyUI to
styles.css
:
styles.css
#
Improve NavBar Component Layout
Previous
Router & Lazy Loading in Angular
Next
Angular Signal Forms
New
Membership Plan,
italian only!
Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!
URL
/courses/angular/basics/80-router/20-styling
EMAIL
ADD CODE SNIPPET
ADD IMAGE/SCREENSHOTS
VOTE
5
4
3
2
1
Clean Form
Send
#
Max Screen Content
#
Bonus: Simulate Color Theme with Chrome Dev Tools
#
Interactive Demo & Source Code
Unblock the content
Sign In
It's completely free!
Your email
Password
Sign In
Don’t have an account yet?
Sign Up!
Forgot password?
Or did you not receive
the CONFIRMATION email?
We can now slightly improve the layout of the Navigation bar by adding some Daisy UI classes:
app/core/components/nav-bar.component.ts
