My version of Tour of Heroes app using Svelte.

Features

Tailwind, store for state management, HTTP request (using axios), navigation params, 2 stores, computed values. Url of deployed Svelte app. https://devlinduldulao-svelte-tailwind.netlify.com

To run the project after cloning

Create or go to your demo directory then run the following in the terminal or cmd.

$ git clone https://github.com/webmasterdevlin/heroes-svelte-tailwind.git
$ cd heroes-svelte-tailwind
$ npm install
$ npm run start

The Svelte app and the fake web service will run concurrently.

---

---

Tailwind.css installation

Setting up Tailwind with svelte is really simple, just install Tailwind and pocstcss-cli:

npm install tailwindcss postcss-cli --save-dev

If you want to remove unused styles, add PurgeCSS as well

npm install @fullhuman/postcss-purgecss

Create your Tailwind config file

./node_modules/.bin/tailwind init tailwind.js

Create a postcss.config.js file and add this to it

const tailwindcss = require("tailwindcss");

// only needed if you want to purge
const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./src/**/*.svelte", "./public/**/*.html"],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

module.exports = {
  plugins: [
    tailwindcss("./tailwind.js"),

    // only needed if you want to purge
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

Next, create a CSS file for your Tailwind styles. You have to store in it public folder public/tailwind.css and add this to it :

@tailwind base;
@tailwind components;
@tailwind utilities;

Update your package.json with the custom scripts.

build:tailwind is only needed if you want to purge

"scripts": {
    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
    "build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
    "dev": "run-p start:dev autobuild watch:build",
    "build": "npm run build:tailwind && rollup -c",

}

Finally, add a stylesheet link to your public/index.html file

<link rel="stylesheet" href="index.css" />

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

---

Svelte README

This is a project template for Svelte apps. It lives at https://github.com/sveltejs/template.

To create a new project based on this template using degit:

npx degit sveltejs/template svelte-app
cd svelte-app

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd svelte-app
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Deploying to the web

With now

Install now if you haven't already:

npm install -g now

Then, from within your project folder:

cd public
now

As an alternative, use the Now desktop client and simply drag the unzipped project folder to the taskbar icon.

With surge

Install surge if you haven't already:

npm install -g surge

Then, from within your project folder:

npm run build
surge public