DEV Community

Patrick Neise
Patrick Neise

Posted on

Svelte & Tailwind CSS Development in VSCode Remote Container


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.

Getting Started

Clone this repo into a folder for your project

git clone <your-project-name>
Enter fullscreen mode Exit fullscreen mode

Change the origin to your project git repo

git remote set-url origin <path-to-your-project git repo>
Enter fullscreen mode Exit fullscreen mode

Install dependencies

yarn install
Enter fullscreen mode Exit fullscreen mode

Start the dev server

yarn start
Enter fullscreen mode Exit fullscreen mode

Build something amazing with Svelte and Tailwind CSS

Major Frameworks and Tools in the devcontainer

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.

Top comments (0)