Svelte, Snowpack, and Tailwind CSS
This repository contains starter Svelte app with Tailwind CSS built using Snowpack within a VSCode devcontainer.
Features
- 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
Major Frameworks and Tools
- Svelte - Front end development framework
- Tailwind CSS - Utility-first CSS framework
- Snowpack - Frontend build tool
- Tailwind CSS Debug Screens - Shows the currently active screen
Setup Your Project
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>
Development Setup
The .devcontainer folder contains a devcontainer.json to support the building and configuriation of a development container from the Dockerfile local development of the site. Using VSCode with remote container support removes the need to install/manage dependencies for development on the local development machine, as they are maintained within the container.
Prerequisites:
With VSCode, Docker, and the extension installed:
- Click bottom left corner in VSCode
- Select
Remote-Containers: Reopen in Container - The container will build and launch, and then provide a terminal shell from within the running container.
Included VSCode Extensions
The devcontainer.json includes several useful VSCode Extensions to support development.
- 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
Available Development Scripts
yarn start
Runs the app in development mode with live reload.
On first run, default browser will open to http://localhost:8080.
yarn build
Builds the app for production to the build folder.
App will be built and optimized for performance with Snowpack.
Production Container
Build production container image:
docker build . -t <your/tag>
Run container locally:
docker run -p 8000:80 <your/tag>
App will be available at http://localhost:8000.
