Svelte with Vite and TailwindCSS
Tags: svelte
Published: 2021-10-28 16:09:38

---
title: Svelte with Vite and TailwindCSS
published: true
date: 
tags: svelte
canonical_url: https://eternaldev.com/blog/svelte-with-vite-and-tailwindcss
cover_image: https://www.eternaldev.com/static/97a2100e3efae3ff5d3b5afec8840bc7/aa1b3/svelte.webp
---

## What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework with classes that can be composed to build UI. They provide easy classes to replace the CSS you will be writing. You can add multiple CSS classes which are documented in the tailwind website and create the design which you want. This removes the need for coming up with clear names for your CSS class and trying your best to reuse them in your projects.

[TailwindCSS website](https://tailwindcss.com/) contains good documentation of their different classes and how to use them

## Setting up Svelte with Vite

You can create a new project with Svelte and vite by following this guide posted earlier. You should find details on why to use Vite and how to setup the Svelte project with ease.

[https://www.eternaldev.com/blog/build-and-deploy-apps-with-svelte-and-vite/](https://www.eternaldev.com/blog/build-and-deploy-apps-with-svelte-and-vite/)

## Adding TailwindCSS

There are different ways to add TailwindCSS to svelte apps.

1. Svelte with Rollup - If you would like to configure the Tailwind in Svelte which uses Rollup, you can check out the other tutorial like [this](https://css-tricks.com/how-to-use-tailwind-on-a-svelte-site/)
2. Svelte with Vite - You can follow this tutorial to setup TailwindCSS with Svelte and Vite

## What is Svelte Add

Svelte add is a community project to easily add integrations and other functionality to Svelte apps. So you can use this to easily add the TailwindCSS to your Svelte and Vite powered apps. Note that this will work for Vite-powered Svelte apps and SvelteKit.

**Note: This method is recommended for projects you are just freshly initialized. Existing projects may face some issues.**

If you are interested in finding more about other integrations, check out the [Github project](https://github.com/svelte-add)

## Running the Svelte Add command

Go to the root of your project directory and run the following command

```bash
npx svelte-add@latest tailwindcss
```

This command will do a lot of configuration for you. After running the command you can install the new package which are added from this process

```
npm install
```

## Start using TailwindCSS

Once the above steps are completed, you can start using the tailwind CSS in your Svelte app.

Let's build something with our newfound Tailwind CSS power. Instead of the regular todo application, let's build the activity feed from GitHub.

[![gihub_reference.PNG](https://eternaldev.com/static/106cd4b48e9824064978b83824da9290/350de/gihub_reference.png "gihub activity reference")](/static/106cd4b48e9824064978b83824da9290/350de/gihub_reference.png)

Create a new model.ts file for storing the data in Typescript

```ts
export interface ActivityContent {
	profileName: string;
	profileUrl: string;
	time: string;
	repo: Repository
}

interface Repository {
	name: string;
	url: string;
	description: string;
	language: string;
	stars: number;
	updatedDate: string;
}
```

Create a new svelte file and call it ActivityItem.svelte

```ts
<script type="ts">
  import type { ActivityContent } from "src/models";
  import logo from "../assets/svelte.png";

  var activityContent: ActivityContent = {
    profileName: "profile2",
    profileUrl: "https://github.com/eternaldevgames",
    time: "4 days ago",
    repo: {
      name: "eternaldevgames/svelte-projects",
      url: "https://github.com/eternaldevgames/svelte-projects",
      description: "This Repository contains multiple svelte project to learn",
      language: "Svelte",
      stars: 2,
      updatedDate: "Oct 15",
    },
  };
</script>

<div class="p-3 m-3">
  <div class="flex flex-row items-center">
    <img class="h-8 w-8 rounded-full bg-gray-200" src={logo} alt="hero" />
    <h4 class="p-2">
      <a href={activityContent.profileUrl}>{activityContent.profileName}</a>
      started the repo
      <a href={activityContent.repo.url}>{activityContent.repo.name}</a>
    </h4>
    <p class="text-gray-500 text-sm">{activityContent.time}</p>
  </div>
  <div class="ml-8 p-5 rounded-lg bg-white border border-black">
    <a class="text-lg" href={activityContent.repo.url}
      >{activityContent.repo.name}</a
    >
    <p>{activityContent.repo.description}</p>

    <div class="flex flex-row items-center mt-4">
      <div class="w-3 h-3 bg-red-600 rounded-full ml-1 mr-1" />
      <p class="mr-5">{activityContent.repo.language}</p>
      <img
        src="https://img.icons8.com/material-outlined/24/000000/star--v2.png"
        alt="star"
      />
      <p class="ml-1 mr-5">{activityContent.repo.stars}</p>
      <p class="mr-5">Updated {activityContent.repo.updatedDate}</p>
    </div>
  </div>
</div>
```

Here is the result

[![tailwind1.PNG](https://eternaldev.com/static/a205776e12bae4ce66e91264d92171a6/d61c2/tailwind1.png "Tailwind activity")](/static/a205776e12bae4ce66e91264d92171a6/d61c2/tailwind1.png)

## Breakdown of TailwindCSS classes

Since we have all the components styles with Tailwind classes, we will breakdown on some of the important classes which will help you in the next project

```ts
<div class="p-3 m-3">
```

`p-3` refers to the padding on all the sides. The number 3 represents how much padding is added.

```ts
padding: 0.75rem;
```

Similarly, `m-3` refers to adding the margin on all the sides.

```ts
<img class="h-8 w-8 rounded-full bg-gray-200" src={logo} alt="hero" />
```

For the image, we can add the height and width using `h-8` and `w-8`

`rounded-full` can be used to create circles. So it is useful in creating circle avatars for the profile picture.

`bg-gray-200` is used to add background color to the element. The cool thing here is you can replace gray-200 with any color of your choice and it gets set as a background color.

```ts
<p class="text-gray-500 text-sm">{activityContent.time}</p>
```

`text-gray-500` is used to set the font color of the element.

```ts
<div class="ml-8 p-5 rounded-lg bg-white border border-black">
```

`border` is used to add border of 1px

`border-black` is used to add the border-color as black

```ts
<div class="flex flex-row items-center mt-4">
```

`flex` is used to set the display to flex

`flex-row` is used to set the flex-direction to row

`items-center` is used to set the align-items property to center

TailwindCSS has a really good docs site if you want to learn more about the classes used

[https://tailwindcss.com/docs](https://tailwindcss.com/docs)

## Summary

You can see that it is easier to add CSS styles without defining a separate class for each element. This method is a lot faster than adding individual classes but you will have to learn the different classes of TailwindCSS to create content faster.

Join our Discord - [https://discord.gg/AUjrcK6eep](https://discord.gg/AUjrcK6eep) and let's have a discussion there