Add UI Library

Branch

This lesson is not specific to Angular, but adding an UI library will enhance the application’s user interface rather than relying on default browser styles.

// TODO: add before/after illustration of the final application

What is a User Interface (UI) Library?

A user interface (UI) library is a collection of style rules to create a consistent UI throughout the application and saves development time. For this course, you will add DaisyUI and TailwindCSS to your project.

Instructions

1. Run the following command in your terminal to install DaisyUI and TailwindCSS:

   npm install tailwindcss @tailwindcss/postcss postcss daisyui@latest --force

2. Create a PostCSS plugins file named .postcssrc.json at the root of your project and populate it with:

   {
     "plugins": {
       "@tailwindcss/postcss": {}
     }
   }

3. Add these styles into the src/styles.css file:

   + @import "tailwindcss";
   + @plugin "daisyui";

4. Stop the server if it’s still running (keyboard shortcut CTRL+C) and restart it with the following command:

   ng serve

5. Open the src/app/app.html file and replace its content once again to add a DaisyUI header:

   <div class="navbar bg-base-100 shadow-sm">
     <a class="btn btn-ghost text-xl">Task Manager</a>
   </div>

6. Check out the small changes in your browser.