agneym / svelte-tailwind-snowpack Goto Github PK

View Code? Open in Web Editor NEW

102.0 4.0 9.0 1.91 MB

TailwindCSS with Svelte and Snowpack v3

License: Other

JavaScript 55.50% HTML 23.14% Svelte 21.36%

tailwind tailwindcss snowpack svelte

svelte-tailwind-snowpack's Introduction

Svelte with TailwindCSS - Snowpack

✨ Community template for Svelte and Tailwind.

Create a new project with:

npx create-snowpack-app dir-name --template svelte-tailwind-snowpack

Uses svelte-preprocess.

TailwindCSS with Autoprefixer
Testing with @testing-library/svelte and Web test runner
Prettier with svelte-plugin

Available Scripts

npm start

Runs the app in the development mode. Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm run build

Builds a static copy of your site to the build/ folder. Your app is ready to be deployed!

For the best production performance: Add a build bundler plugin like "@snowpack/plugin-webpack" or "@snowpack/plugin-parcel" to your snowpack.config.json config file.

Q: What about Eject?

No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.

svelte-tailwind-snowpack's People

Contributors

Stargazers

Watchers

Forkers

bmartel triptych matschik si87 chalermporn lgs aldaprojects happysalada muskanmahajan37

svelte-tailwind-snowpack's Issues

Just wanted to say thanks

Hi,

Just wanted to say thanks for putting this together and for sharing it, saved me some time working out a few of the finer details!

Uncaught TypeError: App is not a constructor

I followed the instructions, but it doesn't work, what have I missed ?

thanks

Jest hangs on this repo

Thanks for creating this starter.

Jest hangs with svelte-preprocess - know of any solution there?

Why is the bare bundle 36 KBs ?

Issue

The bundled file size is 36 KB without adding anything to the code, apparently it imports the svelte/internal.js whole to the bundle, which I think should not be the case, as if you use the normal svelte template here the bundle size is 1.3 KB

Steps to reproduce issue

npx create-snowpack-app app--template svelte-tailwind-snowpack

cd app

npm i -D @snowpack/plugin-webpack

add plugin to snowpack.config.json

{
  "extends": "@snowpack/app-scripts-svelte",
   "scripts": {},
   "plugins": ["@snowpack/plugin-webpack"]
}

npm run build

  ./build Building your application...

  mount:public............[DONE] mount public --to /
  mount:src...............[DONE] mount src --to /_dist_
  build:.js,.jsx,.ts,.tsx.[DONE] (default) esbuild
  build:svelte............[DONE] (plugin) @snowpack/plugin-svelte
  bundle:*................[DONE] (plugin) @snowpack/plugin-webpack

▼ Console

  [log] ! optimizing dependencies...
  [log]
    ⦿ web_modules/           size       gzip       brotli
      └─ svelte/internal.js  51.68 KB   13.04 KB   11.28 KB


  [log]                              Asset      Size  Chunks                         Chunk Names
                 __snowpack__/env.js  56 bytes          [emitted]
  css/index.9d8e1494ee88da277ad0.css  6.74 KiB       0  [emitted] [immutable]  index
                         favicon.ico  1.12 KiB          [emitted]
    js/index.73420404e48087adf0d8.js  35.9 KiB       0  [emitted] [immutable]  index
                            logo.svg  1.12 KiB          [emitted]
                          robots.txt  67 bytes          [emitted]

▶ Build Complete!

I am just wondering if there is a way to configure it to treeshake unused code from svelte, as that is one of the main reasons we are using svelte

npx create failed to install husky

so i used npx create-snowpack-app chat-app-with-svelte --template svelte-tailwind-snowpack and it says - Success! but it failed to install husky.

[WSL2] Incomplete repository after create?

npx create-snowpack-app testapp --template @snowpack/app-template-svelte

It gets up to this point:

- Initializing git repo.
- Could not complete.

Quickstart:

  cd testapp
  npm start

All Commands:

  npm install      Install your dependencies. (We already ran this one for you!)
  npm start        Start your development server.
  npm run build    Build your website for production.
  npm test         Run your tests.

Looking at the directory, there's no svelte.config.js or tailwind.config.js? Also running npm start seems to work, but changes to the files don't trigger a rebuild or browser refresh.