Cloud Native Development with Tailwind, Google Cloud and Firebase/

...

/

Use Tailwind CSS in Svelte Components

Use Tailwind CSS in Svelte Components

Learn how to use the Tailwind CSS in Svelte Components.

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, there is no impact on ...