Skip to content

Latest commit

 

History

History
184 lines (139 loc) · 3.26 KB

README.md

File metadata and controls

184 lines (139 loc) · 3.26 KB
Raw

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