Sveltekit tailwind starter


Dheepak Krishnamurthy


February 19, 2022

The following is minimal instructions for getting started with the SvelteKit skeleton app, with tailwind and font awesome support. Run the following and follow prompts:

npm init svelte@next
npx svelte-add@latest tailwindcss
npx svelte-add@latest scss
npx svelte-add@latest postcss

Install all the following packages:

npm install
npm install -D @tailwindcss/forms
npm install -D tailwindcss/typography
npm install -D svelte-icons
npm install -D @fortawesome/free-solid-svg-icons@5.15.4
npm install -D @fortawesome/free-regular-svg-icons@5.15.4
npm install -D @fortawesome/free-brands-svg-icons@5.15.4
npm install -D @sveltejs/adapter-static@next
npm install layercake
npm install tw-elements
npm install d3

Add the following to .prettierrc:

  "useTabs": false,
  "quoteProps": "preserve",
  "singleQuote": false,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "bracketSameLine": false,
  "bracketSpacing": true

And run the following to format all files:

prettier . --write --ignore-path .gitignore


If you want to add tailwind-elements, change tailwind.config.js to the following:

const config = {
  content: ["./src/**/*.{html,js,svelte,ts}", "./node_modules/tw-elements/dist/js/**/*.js"],

  theme: {
    extend: {},

  plugins: [

module.exports = config;

And update __layout.svelte to include the following:

<script lang="ts">
  import "../app.css";
  import { browser } from "$app/env";
  import { onMount } from "svelte";
  onMount(async () => {
    if (browser) {
      await import("tw-elements");



BibTeX citation:
  author = {Krishnamurthy, Dheepak},
  title = {Sveltekit Tailwind Starter},
  date = {2022-02-19},
  url = {},
  langid = {en}
For attribution, please cite this work as:
D. Krishnamurthy, “Sveltekit tailwind starter,” Feb. 19, 2022.