sv-tw-scss

Library Docs

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

VSCode Extensions

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

Setup

.env file

PUBLIC_ENVIRONMENT=dev

npm i

npm run dev

Linting

Format and lint consecutively

npm run flint

Global styles

src/styles/global.scss

Media queries

Tailwind Screens & Scss Mixins

Tailwind and Scss are configured to use the following values

values	mob	tab	lap	dsk	wde	uwd	suw
before(tablet)	🔵
before(laptop)	🔵	🔵
before(desktop)	🔵	🔵	🔵
before(wide)	🔵	🔵	🔵	🔵
before(ultrawide)	🔵	🔵	🔵	🔵	🔵
before(superultrawide)	🔵	🔵	🔵	🔵	🔵	🔵
after(mobile)		🔵	🔵	🔵	🔵	🔵	🔵
after(tablet)			🔵	🔵	🔵	🔵	🔵
after(laptop)				🔵	🔵	🔵	🔵
after(desktop)					🔵	🔵	🔵
after(wide)						🔵	🔵
after(ultrawide)							🔵
is(small)	🔵	🔵
is(medium)			🔵	🔵
is(large)					🔵	🔵	🔵
is(mobile)	🔵
is(tablet)		🔵
is(laptop)			🔵
is(desktop)				🔵
is(wide)					🔵
is(ultrawide)						🔵
is(superultrawide)							🔵

---

Svelte Media Query State

The Size class can be accessed wherever Svelte Runes are available

Svelte

if (Size.isSuperultrawide) {
  ...
}

Tailwind

<div class="after(tablet):text-lg">
  ...
</div>

Scss

@include before(laptop) {
  ...
};

Breakpoint configs

tailwind.config.js

src/lib/state/media-query.svelte.ts

src/styles/mixins/_mq-breakpoints.scss