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 postcss-load-config autoprefixer

Create your configuration files

npx tailwindcss init -p

Configure svelte-preprocess in rollup.config.js

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

// ...

export default {
  // ...
  plugins: [
    svelte({
      preprocess: sveltePreprocess({ postcss: true }),
      // ...
    }),
    // ...
  ],
  // ...
};

Next, import Tailwind styles into a component and add it to App.svelte

*Tailwind styles must be imported into a separate component so that changes can be immediately reflected in the browser.

<!-- ./src/Components/Tailwind.svelte -->

<style global>
  @import 'tailwindcss/base';

  @import 'tailwindcss/components';

  @import 'tailwindcss/utilities';
</style>

<!-- App.svelte -->

<script>
  import Tailwind from './components/Tailwind.svelte';

  export let name;
</script>

<Tailwind />

<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>

Finally, configure purge in tailwind.config.js:

module.exports = {
  purge: {
    enabled: !process.env.ROLLUP_WATCH,
    mode: 'all',
    content: ['./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