Svelte + Tailwindcss config

1. Create your Svelte project

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

2. Tailwindcss setup

// Install Tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
// Setup your config file
npx tailwindcss init -p

In tailwindcss.js:

module.exports = {
  purge: {
    enabled: !process.env.ROLLUP_WATCH,
    content: ['./public/index.html', './src/**/*.svelte'],
    options: {
      defaultExtractor: content => [
        ...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []),
        ...(content.match(/(?<=class:)[^=>\/\s]*/g) || []),
      ],
    },
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

App.svelte:

<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Enjoy 😎

Guillaume Duhan