Getting Vite + Tailwind CSS to run in a project without a frontend framework?

Hey guys, I have no clue where to ask this so I'm trying my luck here. I recently started a new project with October CMS (uses Larvel + Twig) and I want to get Vite + Tailwind to run and followed Tailwind v4 installation instruction. It didn't work. I can run Vite but no Tailwind is being built and I can find hardly any information on it whatsoever. I'll try to give you as much information as I can give.

Project folder layout:

theme
    my-theme
	    assets
            build
            css
                main.css
            js
			    app.js
		content
		layouts
            default.htm
		node_modules
		pages
		partials
		    boxes
			    generic
				    // partials that will use Tailwind
					a-partial.htm
					a-partial.yaml			
		package.json
		package-lock.json
		theme.yaml
		vite.config.yaml

vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
    build: {
        outDir: './assets/build',
        manifest: true,
    },
    plugins: [
        tailwindcss(),
    ],
})

app.js

import"../css/main.css";
import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()

main.css

@import "tailwindcss";

What am I missing here to get this to run properly? I tried googling and watching videos but nothing has really helped me so far.