- 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.
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-projectis the name you wanna give to your project in your system
When you run above command terminal will ask some question related to
typescript supportand 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 file
package.jsonand 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
- 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
- Fifth, add a new file in
app.css(just naming convention) and add this following lines in the
- Sixth, add a new file in
__layout.svelte(Not a naming convention) and add following lines of code in
- 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
<h1 class="text-3xl font-bold underline">
On dev serve you will find it. For more, how tailwind classes work => use tailwind docs.
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.