Hello world!

This is a basic website template using SvelteKit and Tailwind with Typography plugin. Basic routes (about, contact, blog) and dark mode / light mode toggle were added to the initial project.

“Tell me and I forget, teach me and I may remember, involve me and I learn.” ― Benjamin Franklin

To build this website, the following steps were followed:

1. Create a SvelteKit Skeleton
2. Add Tailwind Configuration
3. Install Tailwind Typography plugin
4. Back up project with GitHub
5. Create basic routes with Svelte Kit
6. Add dark mode / light mode toggle
7. Deploy web app to Vercel or Netlify

1. Create a SvelteKit Skeleton app

A basic website template was created using SvelteKit Skeleton app and the following options were selected: Typescript, ESLint, Prettier, Playwright. You can read more on how to set up the project in the SvelteKit Documentation.

2. Add Tailwind Configuration

Tailwind Configuration was added to the project. You can follow the Tailwind Documentation to configure Tailwind to your SvelteKit project. To customise your project, find more tailwind classes on this Tailwind CSS Cheat Sheet.

3. Install Tailwind Typography plugin

Tailwind Typography was installed following the steps in the official documentation about Tailwind Typography pluggin.

4. Backup your project in a GitHub repository.

This step will also help you later to deploy your website.

git add -A && git commit -m "Initial commit"

git push

5. Create basic routes with Svelte Kit

Create a folder in routes which will take the name of the route, and in this folder create a page +page.svelte as recently updated in the SvelteKit Documentation

6. Add dark mode / light mode toggle

Typography makes it very easy to add dark mode to your project. With just a line of code you can already apply most of the functionality. For light mode, add class prose and for dark mode dark:prose-invert.

7. Deploy to Vercel or Netlify

Accusantium, minus voluptatem doloribus ratione pariatur nostrum quaerat ex praesentium.

Soluta cumque odit illum at laboriosam rem doloremque architecto magnam?

• Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, iusto odio nam, a, recusandae tempore ipsum quo voluptates molestias exercitationem tenetur. Architecto veniam obcaecati molestiae soluta error. Cum alias repellat, rem nisi ea fugit voluptatum explicabo commodi eum aliquam cupiditate.
• Tempore, est eveniet blanditiis obcaecati necessitatibus dicta neque enim sint aspernatur quis libero, a debitis voluptatem maiores aperiam quam consectetur. Sapiente consequuntur totam omnis veritatis ad corporis nemo tempore commodi, ipsam officia placeat quisquam facilis autem in quod asperiores impedit.
• Odit, repudiandae distinctio? Repellat labore, eligendi perspiciatis quia distinctio expedita ut quidem temporibus tempore inventore ea molestias ducimus odit exercitationem a? Omnis voluptatem quam maiores voluptas vitae laboriosam at non distinctio error? Laudantium, iste inventore dicta sunt blanditiis ipsa ad?
• Fugiat laudantium, quos molestiae reiciendis asperiores praesentium exercitationem ullam adipisci sint soluta quis harum minus voluptatem eveniet hic obcaecati natus aliquam mollitia, debitis nihil officiis? Dolores dolorum quae porro. Veritatis fugiat inventore exercitationem dolore repudiandae quas minima aut recusandae nulla!
• Est omnis eos voluptatem ea rerum architecto iste soluta, consequatur quo magnam voluptatum laborum quidem voluptates repellendus quod dicta harum recusandae alias voluptatibus eum aliquam cumque ratione sed. Error exercitationem voluptas ipsa neque distinctio cumque et ducimus, corrupti voluptatibus repellendus!
• Explicabo quidem quas, debitis, labore sed distinctio facere sunt quia non eos similique quo dignissimos voluptatum omnis eum ducimus quam dolorum et fugiat aperiam error! Facere voluptatem nostrum ipsum cum vitae doloremque asperiores corrupti fugit atque. Rerum doloribus animi nemo!

Ipsam, minima dicta sunt quasi quia pariatur laboriosam incidunt eius!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quas necessitatibus distinctio officia provident laborum alias dolores corporis cupiditate, nesciunt at inventore temporibus magnam non nemo consectetur sit ad? Veritatis. Cum hic sunt itaque suscipit quam rerum sint rem eos fugit dolorum, modi amet quisquam! Consectetur itaque amet, voluptas magni reprehenderit eveniet eaque quis vero quasi, nihil dolor! Corporis, minima? Minima molestiae labore doloremque voluptatum deleniti, modi nobis sed necessitatibus dolore porro delectus odit, asperiores dolorem, quisquam similique! Laborum tempore explicabo autem repellat odit ipsum placeat aliquam, a culpa deleniti. Eaque accusantium minus earum aliquid aspernatur placeat at officiis fugit ad sint dicta eligendi molestiae sit, iure doloremque maiores. Porro tenetur omnis adipisci facere autem distinctio exercitationem assumenda necessitatibus consequatur? Id libero amet perspiciatis autem asperiores adipisci corporis consequuntur aperiam ab itaque ullam dolorem repellat et, possimus qui dolores laborum enim illum doloribus doloremque voluptates optio! Ab pariatur optio dolorem?