Using TailwindCSS in SvelteKit to make a Design System : Part One

Using TailwindCSS in SvelteKit to make a Design System : Part One

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 :
  • Frameworks like Bootstrap or Material are not that much easy to make tweaks to make it own for beginners.
  • 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. 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. 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

Starting Your SvelteKit Demo Template

  • First open your terminal and npm init svelte@next 
npm init svelte@next my-project
Enter fullscreen mode Exit fullscreen mode

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.

cd my-project && npm i
Enter fullscreen mode Exit fullscreen mode

This command is going to install your all dependencies for the project. Now run your SvelteKit project to live dev server using

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

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 
npm install -D tailwindcss postcss autoprefixer svelte-preprocess
Enter fullscreen mode Exit fullscreen mode

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 
npx tailwindcss init tailwind.config.cjs -p
Enter fullscreen mode Exit fullscreen mode
  • Third import svelte preprocess in svelte config file and add the following lines 
import preprocess from 'svelte-preprocess';
Enter fullscreen mode Exit fullscreen mode
  • And add this in config dictionary in svelte config file 
preprocess: [
        preprocess({
            postcss: true
        })
    ],
Enter fullscreen mode Exit fullscreen mode

Like this :
svelte.config.js

  • 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 
  content: ['./src/**/*.{html,js,svelte,ts}'],
Enter fullscreen mode Exit fullscreen mode

Like this
Tailwind.config.js

  • Fifth, add a new file in src named app.css (just naming convention) and add this following lines in the app.css: 
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • Sixth, add a new file in src/routes named __layout.svelte (Not a naming convention) and add following lines of code in layout.svelte: 
<script>
  import "../app.css";
</script>

<slot />
Enter fullscreen mode Exit fullscreen mode
  • 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: 
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
Enter fullscreen mode Exit fullscreen mode

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.

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

HomeBlog

© 2023 EtherCorps. All rights reserved.