Sst

rickellis
2

How to install Svelte with Snowpack and Tailwind

How to install Svelte with Snowpack and Tailwind.

This document describes how to set up Svelte with Snowpack 3.0 and Tailwind CSS, bundled with ESBuild.

Install Snowpack

npx create-snowpack-app YOUR-PROJECT-NAME --template @snowpack/app-template-minimal

cd YOUR-PROJECT-NAME

// Run Snowpack to make sure it's working
npm run start

Install Svelte and Tailwind

npm install -D svelte --save

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

// If you intend to use the Typography featuers of Tailwind
// install this
npm install @tailwindcss/typography

// Create the tailwind config file
npx tailwindcss init

// These are Snowpack plugins for Svelte and Tailwind
npm install -D @snowpack/plugin-svelte
npm install -D @snowpack/plugin-postcss postcss postcss-cli

Update the Snowpack config file

Repalce the contents of snowpack.config.js with:

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: "/",
    src: "/dist",
  },
  plugins: ["@snowpack/plugin-svelte", "@snowpack/plugin-postcss"],
  routes: [],
  optimize: {
    bundle: true,
    minify: true,
    target: "es2018",
  },
  packageOptions: {},
  devOptions: {},
  buildOptions: {},
};

Set up the Svelte files

Create two new folders:

src
public

Move index.css and index.html into public:

public
  index.css 
  index.html

Move index.js into src and create a new file called App.svelte in there as well:

src
  App.svelte 
  index.js

Replace the contents of public/index.html with:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
    <title>SITE NAME</title>
  </head>
  <body>
    <script type="module" src="./dist/index.js"></script>
  </body>
</html>

Replace the contents of public/index.css with:

@tailwind base;
@tailwind components;
@tailwind utilities;

Replace the contents of src/index.js with:

// index.js
import App from "./App.svelte";

let app = new App({
  target: document.body,
});

export default app;

// Hot Module Replacement (HMR)
// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement
if (import.meta.hot) {
  import.meta.hot.accept();
  import.meta.hot.dispose(() => {
    app.$destroy();
  });
}

Replace the contents of src/App.svelte with:

<script>

</script>
<style>
  
</style>
<div class="px-5 bg-green-300 box">
  <p>Hello world!</p>
</div>

Create a file called postcss.config.js in the root and add this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Add this to the purge[] array in tailwind.config.js

'./src/**/*.html',
'./src/**/*.js',
'./src/**/*.svelte',

If you intend on using the Typography features of Tailwind, add the plugin to your tailwind.config.js file:

  plugins: [
    require("@tailwindcss/typography")
  ],

Done!

To run your new app, run:

npm run start

To build your app run:

npm run build

Top categories