Why tailwind css doesn't work on my sveltekit project with vite?

I have a svelte kit project that has installed tailwind css, but the tailwind css doesn't work.

The tailwind css classes doesn't affect the text i have, here my code in ./src/routes/+page.svelte:

<h1 class="text-3xl font-bold underline">Hello world!</h1>

The output should show a text with 30px font size, bold and have line under the text, but it shows this:

Output in localhost

Project structre

Here is my tailwind css config, note that the project is with typescript:

import type { Config } from 'tailwindcss';export default {    content: ['./index.html', './src/**/*.{svelte,js,ts,jsx,tsx}'],    theme: {        extend: {}    },    plugins: []} satisfies Config;

postcss.config.js:

export default {  plugins: {    tailwindcss: {},    autoprefixer: {},  },}

Note

If you want the code of a file, say in the comments