Getting started with Tailwind + Daisy UI in Angular 18

Installation

1. Visual Studio Code
   https://code.visualstudio.com/

2. NodeJS
   https://nodejs.org/en

3. Angular CLI
   npm install @angular/cli

Creating Angular App

1. Create your own project folder via cmd / manually create it.
2. Open that folder in visual studio code
3. Open new VScode terminal
4. In cmd / Terminal create new angular app ng new <projectname> ng new myapp
5. Change directory to that folder cd myapp

6.To run the newly created angular app you can write in terminal / cmd

Npm start


Congratulations you’ve created your first angular app. Now let's try to learn tailwind

Tailwind CSS

To configure tailwind css in your Angular App you have to do the following steps

1.Install Tailwind CSS
npm install -d tailwindcss

2.Initiate Tailwind.config.js
By default the tailwindcss is not available, to initiate tailwindcss you need to run the below command to generate the tailwind.config.js.
npx tailwindcss init

1. Open Tailwind.config.js and change the content to below [“./src/*/.{html,js}”] previously “content” do not have any value by default.

4.Go to src folder > styles.css and add the following codes in styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

5.Open the terminal again and input the below command
npx tailwindcss -i ./src/styles.css -o ./src/output.css --watch


After running the command, it will generate output.css file automatically. This will Map your changes on styles.css to output.css and sync them automatically when styles.css gets updated.

6.Next step is to map the output.css to your Angular App index.html. It will enables you to see your styles changes in the frontend side. Because if you did not attached the output.css you will not see your changes made in terms of styles.

Go to > src > index.html then add
<link href="./output.css" rel="stylesheet">

7.Then you go to src > app > app.component.html , remove all the html and css default content of angular and paste the code below

8.Finally! You have made it! You have created your first tailwind ui component

Let’s try to add some fun and improve our style a little bit. We will create card using Tailwind CSS. Please copy paste the below codes or manually type it for you to be familiar with the basic tailwind utility classes like shadow, background, padding, fonts etc.

In app.component.html. Then run the angular app again using npm start command and you will see this beautiful card made using Tailwind css in your Angular App running. Congratulations youre now able to use the tailwind Css styles.

Congratulations! you are now able to start learning tailwind css and learn the utility classes. If you want to learn more about tailwind and it is utility classes you can visit https://tailwindcss.com/ . Tailwind CSS is a great Css framework that you can use to style web application faster and easier and there is a lot to offer like multiple theming, easy multiple device responsive display implementations and combining utility classes to create more customizable component.

Daisy UI

What is Daisy UI?

Is a component library framework and it extends the tailwind utility classes. It provides pre built UI component like buttons, cards, modals, accordion, drawers, navigation and more. You can use these pre built component right away to your tailwind project

Why do you need to use DaisyUI?

One of the downside of tailwind css , when you are using tailwind utility classes it makes your html tag classes long as you need to use the tailwind classes all the time just to achieve your desire component look and feel. As tailwind is very flexible it is also the key feature of it . As application is getting bigger, maintaining tailwind styles is quite time consuming to maintain and update styles when needed.

Daisy UI provides a bunch of pre defined components, meaning you can just call the daisy component classes and it will apply the component style right away with little code than the tailwind classes. Daisy uses tailwind as a base meaning you can still use tailwind utility classes whenever you need. Imagine if you need to create a card you just need to call the below classes

rather than creating your own card from scratch using Tailwind utility classes, see the below image to see how long the classes looks like vs daisy classes only contains "card" and "card-title"

For me, tailwind css is more robust if you want your styles to maintain and scale anytime, you can change it and use it while daisy offers a ready based component that you can use right away. I love using daisy as it supports tailwind utility classes as well. Why just use the two together? I would say daisy has the same concept with bootstrap.

Installation

To configure daisy UI in your Angular App you have to do the following steps

1. Install Tailwind CSS npm install -d tailwindcss

1. In tailwind.config.js, add the daisy in the plugins plugins : [require(‘daisyui’),]

1. Now, let us use the daisy UI to our angular tailwind project. Click the below link and copy paste the dropdown html to your Angular app app.component https://daisyui.com/components/dropdown/

1. In Daisy ui component > dropdown page, copy the html and paste to app.component.html

If you save and run the angular app ng serve or npm start this will look like.

Congratulations! You are now using Daisy UI + Tailwind CSS in your Angular App. Daisy has bunch of components that you can use in your web app project. You can visit this link to explore more the daisy ui components .
https://daisyui.com/components/

Comments

[Ryan Niño Dizon]

nice. keep writing something like.

[Jp Lazaro]

thank you salamat salamat!!