Read if:
- You wanna learn how to setup TailwindCSS in SvelteKit.
- You wanna understand design system basics.
- 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
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
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
How do i know
what will npm run dev will do?
For that in your project root directory find a filepackage.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.
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
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
- Third import svelte preprocess in svelte config file and add the following lines
import preprocess from 'svelte-preprocess';
- And add this in config dictionary in svelte config file
preprocess: [
preprocess({
postcss: true
})
],
- 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}'],
- Fifth, add a new file in
src
namedapp.css
(just naming convention) and add this following lines in theapp.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 inlayout.svelte
:
<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:
<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.
This is me writing for you. If you wanna ask or suggest anything please put it in comment.
Top comments (0)