Svelte Tailwind

Svelte Tailwind with Tailwind Preprocessor for dynamic elements like "text-{color}-200"

Svelte template with Tailwind CSS

Table of contents

Install Tailwind CSS with Svelte

Setting up Tailwind CSS in a Svelte project.

  1. Install necessary dependencies:

    npm i -D svelte-preprocess tailwindcss postcss autoprefixer
  2. Run the init command to generate the tailwind.config.js file:

    npx tailwindcss init
  3. Configure svelte-preprocess in your rollup.config.js file:

    // ...
    import sveltePreprocess from 'svelte-preprocess'
    // ...
    export default {
      // ...
      plugins: [
          // ...
          preprocess: sveltePreprocess({
            sourceMap: !production,
            postcss: {
              plugins: [require('tailwindcss')(), require('autoprefixer')()],
        // ...
      // ...
  4. Add the Tailwind directives to your App.svelte:

      export let name;
      <h1>Hello {name}!</h1>
      <p> Visit the <a href="">Svelte tutorial</a> to learn how to build Svelte apps.</p>
    <style lang="postcss" global>
      @tailwind base;
      @tailwind components;
      @tailwind utilities;
  5. Finally, add the paths to all of your template files in your tailwind.config.js file:

    module.exports = {
      content: ['./public/index.html', './src/**/*.svelte'],
      theme: {
        extend: {},
      plugins: [],

Get started

Install the dependencies...

npm install

...then start Rollup:

npm run dev

Building and running in production mode

npm run build

Using TypeScript

This template comes with a script to set up a TypeScript development environment, run:

node scripts/setupTypeScript.js


Top categories

Loading Svelte Themes