Added original Gist's suggested comment and a border + shadow for higher contrast.
Note
The Svelte 5 version is now available in the ScreenSizeV2_Svelte5.svelte file!
To use it, bring it into your +layout.svelte as follows:
<script>
import { dev } from "$app/environment";
import ScreenSize from "$lib/components/ScreenSize.svelte";
</script>
{#if dev}
<ScreenSize />
{/if}
...ScreenSizeV2 is a personal improvement to the original component. It adds:
- Dynamic breakpoint fetching from the Tailwind config
- Toggleable sliding menu listing all your existing breakpoints
The Tailwind-4-compatible v2 version is now self-contained, completely standalone, and Svelte-5-native. It's unfortunately quite chonkier than the Tailwind 3 edition, due to the CSS to JS conversion we have to manually handle now.
It however supports other units than px, uses bleeding-edge Svelte 5 additions, and now highlights the current screen size in its menu!
It's kind of a v3, but more of a v2.5: a v2 version with some tiny tweaks to reward you for your Tailwind 4 migration!
Important
Since Tailwind 4.0.5, you'll need to change your imports at the top of your CSS file to avoid tree-shaking breakpoint variables.
-@import "tailwindcss";
+@layer theme, base, components, utilites;
+
+@import "tailwindcss/theme" layer(theme) theme(static);
+@import "tailwindcss/preflight" layer(base);
+@import "tailwindcss/utilities" layer(utilities);You'll also have to add the static option to your @theme:
-@theme {
+@theme static {This has however the drawbacks of including all, even unused, CSS variables inside your bundle.
Reference discussion and docs link.
To use the v2 for Tailwind 3, you'll need to tweak your Vite config and your Tailwind config too in order to import the Tailwind config into your code. Here's what you have to do:
Add this option to allow Vite to fetch files anywhere in your project, not only in your source code. This allows importing the Tailwind config inside your code.
// vite.config.ts
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
export default defineConfig({
- plugins: [sveltekit()]
+ plugins: [sveltekit()],
+ server: {
+ fs: {
+ strict: false // `allow: ["."]` also works
+ }
+ }
});Make sure to use the correct import for tailwindcss/defaultTheme if you want to use custom breakpoints:
import type { Config } from "tailwindcss";
- import { screens } from "tailwindcss/defaultTheme";
+ import defaultTheme from "tailwindcss/defaultTheme";
import typography from "@tailwindcss/typography";
export default {
content: ["./src/**/*.{html,js,svelte,ts}"],
theme: {
screens: {
xs: "475px",
- screens
+ ...defaultTheme.screens
},
...