Sveltekit tailwind starter

Keywords

svelte, sveltekit, tailwind, fontawesome, layercake, starter

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

tailwind-elements

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: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("tw-elements/dist/plugin"),
  ],
};

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");
    }
  });
</script>

Reuse

Citation

BibTeX citation:

@online{krishnamurthy2022,
  author = {Krishnamurthy, Dheepak},
  title = {Sveltekit Tailwind Starter},
  pages = {undefined},
  date = {2022-02-19},
  url = {https://kdheepak.com/blog/sveltekit-tailwind-starter},
  langid = {en}
}

For attribution, please cite this work as:

D. Krishnamurthy, “Sveltekit tailwind starter,” Feb. 19, 2022. https://kdheepak.com/blog/sveltekit-tailwind-starter.