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

Question

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

Answer 1

I Founded that if you create +layout.svelte file and write this code:

<script>
 // After installing the tailwind css
 import 'tailwindcss/tailwind.css';
</script>

<!-- Put anything from the +page.svelte file here  -->
<slot />

Its import the tailwind css file that saved all classes to use it like a css file