https://github.com/webmasterdevlin/heroes-svelte-tailwind
Tour of Heroes using Svelte and Tailwind CSS
https://github.com/webmasterdevlin/heroes-svelte-tailwind
Last synced: 2 months ago
JSON representation
Tour of Heroes using Svelte and Tailwind CSS
- Host: GitHub
- URL: https://github.com/webmasterdevlin/heroes-svelte-tailwind
- Owner: webmasterdevlin
- License: mit
- Created: 2019-08-29T17:59:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T09:42:19.000Z (over 2 years ago)
- Last Synced: 2025-03-25T20:05:30.062Z (3 months ago)
- Language: CSS
- Homepage: https://devlinduldulao-svelte-tailwind.netlify.com/
- Size: 524 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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](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.
```sh
$ 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:
```sh
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
```sh
./node_modules/.bin/tailwind init tailwind.js
```
Create a `postcss.config.js` file and add this to it
```js
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 :
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Update your `package.json` with the custom scripts.
`build:tailwind is only needed if you want to purge`
```js
"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
```html
```
## 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](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
```bash
npx degit sveltejs/template svelte-app
cd svelte-app
```
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
## Get started
Install the dependencies...
```bash
cd svelte-app
npm install
```
...then start [Rollup](https://rollupjs.org):
```bash
npm run dev
```
Navigate to [localhost:5000](http://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](https://zeit.co/now)
Install `now` if you haven't already:
```bash
npm install -g now
```
Then, from within your project folder:
```bash
cd public
now
```
As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
### With [surge](https://surge.sh/)
Install `surge` if you haven't already:
```bash
npm install -g surge
```
Then, from within your project folder:
```bash
npm run build
surge public
```