Sveltekit tailwind 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"),
,
];
}
.exports = config; module
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},
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.