Getting started with Tailwind + Daisy UI in Angular 18
Tags: angular, tailwindcss, daisyui, typescript
Published: 2024-07-08 13:24:45


## 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
`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct6yrm22wd0972dthxt5.png)

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

`Npm start
`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8zh7zd6rysu7uxkkflh.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbj2umj9spn84605vr5d.png)

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`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xawwfeyvu58mt2vfigbm.png)

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`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vljz9upb82m2n2zg8ejo.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tophu189n1fuemckqmj4.png)

4.Go to src folder > styles.css and add the following codes in styles.css
`
@tailwind base;
@tailwind components;
@tailwind utilities;`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0qxfm1bd1g19kjog8l0.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oku5smzf5a6w51uqgvel.png)



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">`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p93csz5iqlkgvk0w2u8a.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r3pxwgdc9c6slc4sij4.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23k3o8sxw85khdcys3k1.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m377f44m4ladypisim1t.png)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibrhqg2ifevnaz659d7j.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5xtzcl1wuhdgyiyyrzj.png)

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" 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4g2ozw69o43k4101fvhi.png)


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`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz2ov0bcrype0mg99n27.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p53vl796fmyo1pfrtoc4.png)



3. 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/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ertoydm6zyqaf5f9zh2.png)


4. In Daisy ui component > dropdown page, copy the html and paste to  app.component.html
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4rf88x7ary4r4r4u5ak.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnewcg03g9gynl1mhl4g.png)



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/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvr26hmfmse91ydzhwua.png)