Install Tailwind CSS in Sveltekit + Vite + Typescript
Tags: svelte, tailwindcss, tutorial, webdev
Published: 2022-08-17 06:53:06

In this section we will install & setup **Svelte kit + Vite + Typescript with Tailwind CSS 3**.  For this section we will use [create-tw](https://github.com/AndrejJurkin/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](https://larainfo.com/blogs/install-tailwind-css-in-sveltekit-vite-typescript)

### Create Tailwind CSS Project with Sveltekit
Create tailwind-app with sveltekit using npx:
```sh
npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
```
Create tailwind-app with sveltekit using yarn:
```sh
yarn create tw
# OR
yearn create tw <project-name> --template <id>
```
Select Sveltekit project.

![install &amp; setup sveltekit app with tailwindcss v3 + typescript + vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hst5na2qsxkm5j8z65j.png)

Next,  you need to select typescript. 
```js
 _ ._ _  _. _|_ _  _|_     
 (_ | (/_ (_| |_ (/_  |_ \/\/  
                  

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.
```js
? 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.
```js
                  
 _ ._ _  _. _|_ _  _|_     
 (_ | (/_ (_| |_ (/_  |_ \/\/  
                  

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.
```sh
cd tailwind-sveltekit
npm run dev
```
_src/routes/index.svelte_
```html
<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>
```

![sveltekit app with tailwindcss + typescript + vite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyvw87ru9jwcc2xv7cu8.png)

### Read Also
[Install Skeleton Svelte UI with Tailwind CSS in Svelte + SvelteKit](https://larainfo.com/blogs/install-skeleton-svelte-ui-with-tailwind-css-in-svelte-sveltekit)
[Install Tailwind Plugins + Vite + Typescript + Tailwind CSS 3](https://larainfo.com/blogs/install-tailwind-plugins-vite-typescript-tailwind-css-3)
[Install Tailwind CSS in SolidJS + Vite + Typescript](https://larainfo.com/blogs/install-tailwind-css-in-solidjs-vite-typescript)