How to Configure VS Code for SvelteKit and TailwindCSS Web Development

In this article, I am going to show you how to correctly configure VS Code to develop SvelteKit 5 app using TailwindCSS.

Installing Required VS Code Extensions

For SvelteKit app development, you will need to install the following VSCode Extensions.

ESLint (by Microsoft)

Prettier (by Prettier)

Svelte for VS Code (by Svelte)

Tailwind CSS IntelliSense (by Tailwind Labs)

Configuring VS Code to Get TailwindCSS Autocompletion

To get proper TailwindCSS autocompletion on your SvelteKit project, you need to create a .vscode/ folder in your project root and create a settings.json file in the .vscode/ folder.

The contents of the .vscode/settings.json file is:

{
    "files.associations": {
        "*.css": "tailwindcss"
    },
    "tailwindCSS.includeLanguages": {
        "plaintext": "svelte"
    }
}

You should get TailwindCSS autocompletion on your .svelte files.

Setting a Default Formatter for .svelte Files

To use the official Svelte Code Formatter for .svelte files and automatically formatting files on save, type in the following lines in the .vscode/settings.json file.

{
    // tailwindcss configuration...
    "files.autoSave": "onFocusChange",
    "[svelte]": {
        "editor.defaultFormatter": "svelte.svelte-vscode"
    },
    "editor.formatOnSave": true
}