How to add Tailwind CSS in SvelteKit official demo application?

I have created sample application by following steps given at https://kit.svelte.dev/docs/creating-a-project

npm create svelte@latest my-app

So the project structure is

alok@alok-HP-Pavilion-Laptop-14-dv0xxx:~/exp/my-app$ tree -L 3 --gitignore.├── jsconfig.json├── package.json├── package-lock.json├── playwright.config.js├── README.md├── src│  ├── app.d.ts│  ├── app.html│  ├── lib│  │  └── images│  └── routes│  ├── about│  ├── Counter.svelte│  ├── Header.svelte│  ├──+layout.svelte│  ├──+page.js│  ├──+page.svelte│  ├── styles.css│  └── sverdle├── static│  ├── favicon.png│  └── robots.txt├── svelte.config.js├── tests│  └── test.js└── vite.config.js

This project already have src/routes/styles.css file and import './styles.css'; inside src/routes/+layout.svelte file.

Now I want to add Tailwind CSS by following https://tailwindcss.com/docs/guides/sveltekit

In this page they are asking to create ./src/app.css and import it in src/routes/+layout.svelte

What I have to do with my existing src/routes/styles.css file?

What is right way to add Tailwind CSS in official demo app?