SvelteKit + TailwindCSS + Cloudflare template

Note about Svelte inspector

If the site is started on local development environment, i.e pnpm dev, there should be a icon button at the left bottom corner of the page. That's the Svelte inspector feature that is enabled via svelte.config.js. Activate by clicking on it, then hover and click on any element on this page, which should open the corresponding source code location in your editor.

Note about CSS components

Use button and link as CSS components, not JS components. This approach decouples markup from styling and greatly enables flexibility for these basic building-block components. Similar approach can be observed in the Daisy UI library.

For example, inspect this inline link this link to the svelte.dev site

Or, inspect any of these buttons:

I am an HTML link, but looks like a button

I am an icon link

Note about Automatic External Link Detection

Inspect the links on this page and its source code to see that there the target and rel attributes are added automatically. This feature is enabled via the @svelte-put/preprocess-external-link added in svelte.config.js.