Using Head Tag In Svelte – Svelte Head example

Posted on: February 19, 2021 by Jatin Hemnani

In this article, you will learn How To Add Head Tag In Svelte.

In Svelte you get a tag for adding all the functionality of <head> tag like adding a title and CSS CDN(like bootstrap).

Adding Head Tag

<svelte:head>
	<title>Svelte is Great</title>
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</svelte:head>

Here, we have a <svelte:head> tag which is provided by Svelte. We have a title and a CDN of Tailwind CSS to add some styles. You can add anything which you do in a normal HTML <head> tag. NOTE: You can’t use this tag inside another.

<svelte:head>
	<title>Svelte is Great</title>
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</svelte:head>

<div class="p-5 bg-purple-500 hover:bg-purple-300 text-white transition duration-500 text-center">Hello world!</div>

Using Head Tag In Svelte – Svelte Head example

Adding Head Tag

Result Of The Above Code

Related Posts:

category :

tag :

Share on social media