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.
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.
Top comments (0)