• Svelte
• Sveltekit
• Tailwind
• Scss
• TypeScript
• Prettier
• ESLint

• Svelte Intellisense
• Svelte for VS Code
• Tailwind CSS IntelliSense
• Prettier - Code formatter

npm i

npm run dev

Format and lint consecutively

npm run flint

src/styles/global.scss

The readable store ize can be accessed with $ize in Svelte components
Outside of Svelte components, use the getSize() function
It can be compared against the Size enum

// Svelte components
if ($ize === Size.SUPERULTRAWIDE) {
  // do something big
}

// Typescript files
if (getSize() <= Size.TABLET) {
  // do something small
}

Tailwind and Scss are configured to use the following values

<div class="bg-blue-500 after(tablet):bg-green-500">
  default: blue
  larger than tablet: green
</div>

@include before(laptop) {
  div {
    color: red;
  }
};