Using TailwindCSS in SvelteKit to make a Design System : Part One
Tags: javascript, svelte, tailwindcss, designsystem
Published: 2022-07-17 17:29:00

Read if:
1. You wanna learn how to setup TailwindCSS in SvelteKit.
2. You wanna understand design system basics.
3. You wanna learn how to make a Design System using TailwindCSS.

**Introduction**

One day, I was reading an article `What is the need of having a design system`. They mentioned some crucial point to be noticed in the articles. 

- Example : 
1. Frameworks like Bootstrap or Material are not that much easy to make tweaks to make it own for beginners.
2. Design Systems are crucial for business because to make a good UX for users you need to have a simple & beautiful design, while all design systems provide beautify out of the box but it's not simple.

**What is a Design System?**
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

> If you are looking for Open Sourced Design Systems [Click Here](https://adele.uxpin.com). This contains all big projects.

**What is Tailwind CSS?**
Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

> If you are looking to use TailwindCSS Without SvelteKit, Visit [TailwindCSS Docs](https://tailwindcss.com/docs/installation). They explain everything in detail.

**What is SvelteKit?**
SvelteKit is an app framework (or 'metaframework') built on top of Svelte (which is a component framework). Its job is to make it easy to build Svelte apps with all the modern best practices like server-side rendering (SSR) and code-splitting.

> Wanna learn more about SvelteKit? Visit [SvelteKit Docs](https://kit.svelte.dev/docs/introduction)

**Starting Your SvelteKit Demo Template**
- First open your terminal and npm init svelte@next 
```javascript
npm init svelte@next my-project
```
> `my-project` is the name you wanna give to your project in your system

- When you run above command terminal will ask some question related to `prettier`, `typescript support` and etc, choose as per your need.

- Above step created a dir in your system by the name `my-project`. Now got your project directory and npm install all dependencies.
```javascript
cd my-project && npm i
```
> This command is going to install your all dependencies for the project. Now run your SvelteKit project to live dev server using
```javascript
npm run dev
```
> How do i know `what will npm run dev will do?` For that in your project root directory find a file `package.json` and in this file there is a Dictionary by name of scripts. Read it and if you have any trouble ask in comment or google it.

- This is how it's gonna look like if you setup with demo app on browser.

![SvelteKit Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ytt9m0dofjsjzfur30a.png)

This will do SvelteKit setup. Now we will see how to setup Tailwind CSS in this project.

**Setting up Tailwind CSS in SvelteKit Project**
- First, open your terminal and go to your project directory using terminal and run 
```javascript
npm install -D tailwindcss postcss autoprefixer svelte-preprocess
```

> This will install TailwindCSS, PostCSS, AutoPrefixer and Svelte Preprocess. For more about them please google.

- Second, run this command to init tailwind config file in project

```javascript
npx tailwindcss init tailwind.config.cjs -p
```

- Third import svelte preprocess in svelte config file and add the following lines
```javascript
import preprocess from 'svelte-preprocess';
```
- And add this in config dictionary in svelte config file
```javascript
preprocess: [
		preprocess({
			postcss: true
		})
	],
```

> Like this : 
![svelte.config.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsv8bgcgajfm5yok8v1b.png)

- Fourth, we gonna tell Tailwind CSS to find our file where we gonna use tailwind classes. Add this line in tailwind config file in module.exports dictionary
```javascript
  content: ['./src/**/*.{html,js,svelte,ts}'],
```

> Like this 
![Tailwind.config.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wu2oh260q7xk6t7v2ycn.png)

- Fifth, add a new file in `src` named `app.css` (just naming convention) and add this following lines in the `app.css`:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

- Sixth, add a new file in `src/routes` named `__layout.svelte` (Not a naming convention) and add following lines of code in `layout.svelte`:
```css
<script>
  import "../app.css";
</script>

<slot />
```

- As your dev server was running you might see little changes in heading size and all to see if it's working, add following lines of code in `src/routes/index.svelte` file:
```html
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
```

> On dev serve you will find it. For more, how tailwind classes work => use tailwind docs.

######This is the end of first part.
---
##### To read second part of this series [click here](https://dev.to/theether0/using-tailwindcss-in-sveltekit-to-make-a-design-system-part-two-lp).


This is me writing for you. If you wanna ask or suggest anything please put it in comment.