In this section we will install & setup Svelte kit + Vite + Typescript with Tailwind CSS 3. For this section we will use create-tw it will help to CLI to scaffold tailwindcss-ready projects. create-tw help to create simple ready template for Svelte kit + vite + typescript with tailwind css 3.
view
Create Tailwind CSS Project with Sveltekit
Create tailwind-app with sveltekit using npx:
npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
Create tailwind-app with sveltekit using yarn:
yarn create tw
# OR
yearn create tw <project-name> --template <id>
Select Sveltekit project.
Next, you need to select typescript.
_ ._ _ _. _|_ _ _|_
(_ | (/_ (_| |_ (/_ |_ \/\/
Welcome to create-tw!
The easiest way to create a Tailwind project
? Project name tailwind-sveltekit
? App type Svelte Kit (create-svelte)
tid svelte-kit
? What language will your project be written in? (Use arrow keys)
❯ TypeScript
JavaScript
Select code style.
? Which dependencies would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ prettier
◯ clsx
Select tailwind plugin for svelte kit.
_ ._ _ _. _|_ _ _|_
(_ | (/_ (_| |_ (/_ |_ \/\/
Welcome to create-tw!
The easiest way to create a Tailwind project
? Project name tailwind-sveltekit
? App type Svelte Kit (create-svelte)
tid svelte-kit
? What language will your project be written in? ts
templateIdKey svelte-kit-ts
? Which dependencies would you like to include?
? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ @tailwindcss/typography
◯ @tailwindcss/forms
◯ @tailwindcss/aspect-ratio
Move to Project and run vite svelte kit.
cd tailwind-sveltekit
npm run dev
src/routes/index.svelte
<svelte:head>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</svelte:head>
<div
class="h-screen bg-gradient-to-b from-gray-900 to-slate-800 flex flex-col text-white"
>
<header class="py-16">
<h1 class="text-4xl font-bold text-center mb-1">Create Tailwind + Sveltekit + Vite + TypeScript</h1>
<p class="text-center mb-6 text-neutral-300">
If you like this project, consider giving it a star on GitHub!
</p>
<div class="flex flex-row justify-center items-center gap-4">
<a
class="github-button"
href="https://github.com/andrejjurkin/create-tailwind-app"
data-color-scheme="no-preference: dark; light: dark; dark: dark;"
data-icon="octicon-star"
data-size="large"
data-show-count="true"
aria-label="Star andrejjurkin/create-tailwind-app on GitHub">Star</a
>
<a
class="github-button"
href="https://github.com/andrejjurkin/create-tailwind-app/discussions"
data-color-scheme="no-preference: dark; light: dark; dark: dark;"
data-icon="octicon-comment-discussion"
data-size="large"
aria-label="Discuss andrejjurkin/create-tailwind-app on GitHub"
>Discuss</a
>
</div>
</header>
</div>
Read Also
Install Skeleton Svelte UI with Tailwind CSS in Svelte + SvelteKit
Install Tailwind Plugins + Vite + Typescript + Tailwind CSS 3
Install Tailwind CSS in SolidJS + Vite + Typescript
Top comments (0)