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.

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 [email protected]: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.