Svelte & Tailwind CSS Development in VSCode Remote Container

Background

It's been a while since my first post, so figured I would update the Svelte Remote Container example with some new additions and changes.

Features of the new VSCode devcontainer include:

• Svelte with Tailwind CSS starter app
• Tailwind CSS Debug Screens to show screen size during development
• Snowpack configured to optimize production build
• Dockerfile and nginx configuration for production build
• nginx config with caching and compression enabled
• Several VSCode extensions to support Svelte/Tailwind development

This setup has evolved over time as I've continued to learn Svelte and now Tailwind CSS (a great combination imho) and swapped out Rollup for Snowpack.

patrickneise / svelte-snowpack-tailwind

Getting Started

Clone this repo into a folder for your project

git clone https://github.com/patrickneise/svelte-snowpack-tailwind.git <your-project-name>

Change the origin to your project git repo

git remote set-url origin <path-to-your-project git repo>

Install dependencies

yarn install

Start the dev server

yarn start

Build something amazing with Svelte and Tailwind CSS

Major Frameworks and Tools in the devcontainer

• Svelte - Front end development framework
• Tailwind CSS - Utility-first CSS framework
• Snowpack - Frontend build tool
• Tailwind CSS Debug Screens - Shows the currently active screen

VSCode Extensions in the devcontainer

• Svelte - Syntax highlighting, code formatting, and rich intellisense for Svelte components.
• Tailwind CSS IntelliSense - Intelligent Tailwind CSS tooling
• Refactor CSS - Helps identify reoccuring CSS class name combinations in markup
• Headwind - Opinionated Tailwind CSS class sorter

Future Work

A few thoughts around what to add/update into the devcontainer:

• Typescript support
• Build out a more realistic starter app (components, pages, router, etc.)
• Eslint and prettier configs

Any other input/recommendations for how to make this devcontainer better would be greatly appreciated.