Svelte App with Tailwind CSS

This is a project template for Svelte apps.

It uses the default starter template, and adds TailwindCSS via postcss. Autoprefixer is included. Production builds are optimized with purgecss.

To create a new project based on this template using degit:

npx degit collardeau/svelte-tailwind-template my-svelte-app
cd my-svelte-app

Note that you will need to have Node.js installed.

Get Started

Install the dependencies…

cd my-svelte-app
npm install

…then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

Tailwind Usage

Simply use Tailwind classes in your Svelte components:

<p class="text-green-500">Svelte + TailwindCSS</p>

To learn more about TailwindCSS, check out this wonderful series of videos by its author, Adam Wathan.