Search⌘ K
AI Features
Home
Courses
Cloud Native Development with Tailwind, Google Cloud and Firebase

Use Tailwind CSS in Svelte Components

Explore how to apply Tailwind CSS within Svelte components to create modular, styled web pages. Understand using utility classes to change styles dynamically and building reusable components like contact cards. This lesson helps you improve developer efficiency and maintain clean, responsive code design.

We'll cover the following...

Tailwind CSS in action

Time to see our work in action and use a Tailwind CSS class in a component. Let’s change the index page’s title to a different color. Click Run and follow the instructions to start the dev serverrunApp and in the src/routes/index.svelte file given below, change the <h1> tag to the following:

<h1 class="text-yellow-600">Great success!</h1>

Click Run again to save the changes and see the title color updated to reflect the Tailwind CSS text-yellow-600 class.

<script>
	import successkid from 'images/successkid.jpg';
</script>

<style>
	h1, figure, p {
		text-align: center;
		margin: 0 auto;
	}

	h1 {
		font-size: 2.8em;
		text-transform: uppercase;
		font-weight: 700;
		margin: 0 0 0.5em 0;
	}

	figure {
		margin: 0 0 1em 0;
	}

	img {
		width: 100%;
		max-width: 400px;
		margin: 0 0 1em 0;
	}

	p {
		margin: 1em auto;
	}

	@media (min-width: 480px) {
		h1 {
			font-size: 4em;
		}
	}
</style>

<svelte:head>
	<title>Sapper project template</title>
</svelte:head>

<h1>Great success!</h1>

<figure>
	<img alt="Success Kid" src="{successkid}">
	<figcaption>Have fun with Sapper!</figcaption>
</figure>

<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>

Slower server startup time

You may notice a slower startup time for the development server due to the additional work required to process the Tailwind CSS. Once the server starts, there is no difference in the developer experience compared to not using Tailwind CSS. Also, ...