Vite, Rails, Stimulus, Tailwind

import { defineConfig } from 'vite'
import ViteRails from 'vite-plugin-rails'
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
	clearScreen: false,
	plugins: [
		tailwindcss(),
		ViteRails({
			fullReload: {
				additionalPaths: ["config/routes.rb", "app/views/**/*"],
				delay: 300,
			},
		})
	],
	root: "./app/assets",
	build: {
		manifest: true,
		rollupOptions: {
			input: "./app/frontend/entrypoints/application.js"
		}
	},
	css: {
		preprocessorOptions: {
			scss: {
				api: 'modern-compiler' // or "modern"
			}
		}
	}
})

	vite_client_tag
	vite_javascript_tag 'application'
	vite_stylesheet_tag 'application.css', data: { "turbo-track": "reload" }

import { Application } from '@hotwired/stimulus'
import { registerControllers } from 'stimulus-vite-helpers'

const application = Application.start()
const controllers = import.meta.glob("./**/*_controller.js", { eager: true });
registerControllers(application, controllers)

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {

		connect() {
				console.log("Hello, Stimulus!")
		}

		static targets = [ "name" ]

		greet() {
				const element = this.nameTarget
				const name = element.value
				console.log(`Hello, ${name}!`)
		}
}

<div data-controller="hello">
	<input data-hello-target="name" type="text">/</input>
	<button data-action="click->hello#greet">Greet</button>
</div>

@import "../stylesheets/application.tailwind.css";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/aspect-ratio";

@theme {
	--font-serif: "EB Garamond", "serif";
	--color-link: #5960B2;
}

@layer base {
	h1 {
		font-size: var(--text-2xl);
	}
}

@import "tailwindcss";

@source "../../../app/views/**/*.html.erb";
@source "../../../app/views/**/*.rb";
@source "../../../app/helpers/**/*.rb";