Svelte template with Tailwind CSS

Setup

Setting up Tailwind with Svelte is really simple, just install necessary dependencies:

npm i -D svelte-preprocess tailwindcss postcss autoprefixer

Create your configuration files

npx tailwindcss init

Configure svelte-preprocess in rollup.config.js

// ...
import sveltePreprocess from 'svelte-preprocess'

// ...

export default {
  // ...
  plugins: [
    svelte({
      // ...
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
          plugins: [require('tailwindcss'), require('autoprefixer')()],
        },
      }),
    }),
    // ...
  ],
  // ...
}

Next, add tailwind styles into to App.svelte

<script>
  export let name;
</script>

<main>
  <h1>Hello {name}!</h1>
  <p> Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style lang="postcss" global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Finally, add purge and JIT mode in tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: ['./public/index.html', './src/**/*.svelte'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Get started with this template

Install the dependencies...

cd Svelte-Tailwind
npm install

...then start Rollup:

npm run dev

Building and running in production mode

npm run build