/sveltekit-landing-page

Tailwind Landing page template converted to SvelteKit components

Primary LanguageHTML

Tailwind Landing page template converted to SvelteKit components

Based on the Landing Page template for Tailwind CSS created by Tailwind Toolbox and converted to a SvelteKit application.

Landing Page

The site is running at https://sveltekit-landing-page.vercel.app, and it is automatically deployed to vercel on every push using the SvelteKit vercel adapter. Check the documentation for other adapters.

You also have an static version available at https://sveltekit-landing-page.vercel.app/html to compare results.

Deploying to vercel

Add "@sveltejs/adapter-vercel": "next" to the devDependencies in your package.json and run npm install.

pnpm install -D @sveltejs/adapter-vercel

Then modify your svelte.config.js:

const vercel = require('@sveltejs/adapter-vercel');
...

module.exports = {
  kit: {
    ...
    adapter: vercel()
  }
};

Running locally

Clone the repo, install dependencies and start the development server:

git clone git@github.com:opensas/sveltekit-landing-page.git

cd sveltekit-landing-page

pnpm install

pnpm dev

The project SvelteKit project was created with

pnpm init svelte@next

And then tailwind support was added running:

pnpx svelte-add tailwindcss  --jit

And then run the project with:

pnpm dev

Check the svelte-add/tailwindcss github repo for more info.

create-svelte

Everything you need to build a Svelte project, powered by create-svelte;

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm init svelte@next

# create a new project in my-app
npm init svelte@next my-app

Note: the @next is temporary

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

Before creating a production version of your app, install an adapter for your target environment. Then:

npm run build

You can preview the built app with npm start, regardless of whether you installed an adapter. This should not be used to serve your app in production.