Starter Svelte Tailwind

leonistor

Starter template with svelte, tailwind, custom typeface. Works with production build too :-)

Download

svelte + tailwind starter

Using https://github.com/matyunya/smelte to get the production build include all generated css.

pnpm

Using pnpm

Typeface install for tailwind

Not for svelte: Google Fonts in Tailwind

For svelte

- `npm i` [from typefaces repo](https://github.com/KyleAMathews/typefaces) packaged font
- `cp -R node_modules/typeface-cooper-hewitt/files/ public/files`
- `cp node_modules/typeface-cooper-hewitt/index.css public/font-name.css`
- add link:css in index.html
- configure tailwind.config.js as below
- set <body class="font-sans">

const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Cooper Hewitt', ...defaultTheme.fontFamily.sans]
      }
    }
  },
  variants: {},
  plugins: []
};

See tailwindcss repo for font-{sans,display,...}

Quiet dev

Filter npm run dev for stderr only: npm run dev 2>&1 > /dev/null (useful in tmux; this is fis shell, for bash use this )

Check 'quiet' amd 'silent' in package.json scripts:

"dev": "rollup -c -w --silent",
"start:dev": "sirv public --single --dev --quiet"

Util

Tailwind Cheat Sheet

Top categories