Svelte Tailwind2 Starter

Overview

The Svelte + TailwindCSS 2.0 + RollupJS starter is a template for building Svelte applications with TailwindCSS. It includes built-in support for TailwindCSS 2.0 and uses Rollup for bundling. The template also features a simple dark/light mode switch and a surprise button.

Features

• TailwindCSS 2.0 support: The template comes with built-in support for TailwindCSS 2.0, allowing for easy styling and customization of the application.
• Rollup bundling: The bundling of the application is handled by Rollup, making it efficient and easy to manage.
• Dark/light mode switch: The template includes a simple switch to toggle between dark and light themes, providing a customizable user experience.
• Surprise button: There is also a surprise button included in the template, adding a fun and interactive element to the application.

Installation

To install and get started with the Svelte + TailwindCSS 2.0 + RollupJS starter, follow these steps:

1. Install the necessary dependencies:

   // Using npm
   npm install
   
   // Using yarn
   yarn install
   

2. Start Rollup to run the application locally:

   // Using npm
   npm run dev
   
   // Using yarn
   yarn dev
   

3. Navigate to localhost:5000 in your browser to see the app running. Any changes saved in the source files will automatically reload the page.

4. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

5. To create an optimized (production) version of the app, run the following command:

   // Using npm
   npm run build
   
   // Using yarn
   yarn build
   

6. The optimized app can be run with the command npm run start, which uses sirv to serve the files.

7. If you’re building a single-page app with multiple routes, modify the “start” command in package.json to allow sirv to respond to requests for any path.

Summary

The Svelte + TailwindCSS 2.0 + RollupJS starter is a convenient template for developing Svelte applications with TailwindCSS. It offers support for the latest version of TailwindCSS, efficient bundling with Rollup, and additional features such as a dark/light mode switch and a surprise button. The installation process is straightforward, allowing developers to quickly set up and start building their applications.