DEV Community

Carlos Saltos
Carlos Saltos

Posted on • Updated on

TailwindCSS with Sapper and Svelte

What ?

An initial template with Sapper 0.28.0, Svelte 3.17.3 and Tailwind CSS 1.8.6 updated to September 25th, 2020

Why ?

Because there are a lot of posts and reference working but with old versions. This is only another alternative more, trying to use newer versions (that soon will be old too).

How ?

Run the commands:

npx degit csaltos/sapper-svelte-with-tailwindcss app1
cd app1
npm i
npm run dev
Enter fullscreen mode Exit fullscreen mode

And open the browser at http://localhost:3000 to see a Sapper page done with Svelte using a Tailwind CSS sample.

Where ?

At https://github.com/csaltos/sapper-svelte-with-tailwindcss you will find the source code as a reference which is based on the original Sapper with Svelte template.

Please take special attention to the commit at dc251b6 which contains the exact change details to activate Tailwind CSS.

Who ?

This template is possible thanks to many posts and reference from:

IMPORTANT: obviously this is only a starting point, please review TailwindCSS documentation for further steps.

NOTE: you may also use Smelte which comes already configured with TailwindCSS and cool Material components with Sapper and Svelte here -> https://smeltejs.com/

Top comments (8)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
csaltos profile image
Carlos Saltos

WOW !! ... thank you Dan, your solution is amazing, clean, simple and to the point ... I will try to update this post with your reference ... very appreciated

Collapse
 
dansvel profile image
dan

my fault, trying to click the delete button,,

here my repo again,, github.com/dan-unhuman/sapper-temp...

Thread Thread
 
csaltos profile image
Carlos Saltos

ready dan, the post is updated and I hope is useful to people, thank you very much for your help, very smart coding indeed !!

Collapse
 
gevera profile image
Denis Donici

Amazing. I wonder if there is a way to have TypeScript integrated in this template?

Collapse
 
rommyarb profile image
L. Rommy Arbantas • Edited
Collapse
 
developmentvargamarcel profile image
development-vargamarcel

I like how you structured the article. Great job

Collapse
 
cazcmo profile image
cazCMO

Thanks to you, I was able to get an environment that uses tailwind css with "sapper".