Use Tailwind CSS

1. Install the devDependencies

  • Tailwind CSS
  • Autoprefixer - a PostCSS plugin which parses your CSS and adds vendor prefixes
  • PostCSS Purgecss - PostCSS plugin for PurgeCSS (a tool to remove unused CSS)
  • cssnano - to ensure that the final CSS files is as small as possible for a production environment
  • postcss-load-config - to make sure svelte-preprocess can find the postcss.config.js
npm i -D tailwindcss autoprefixer @fullhuman/postcss-purgecss cssnano postcss-load-config

2. Create the tailwind.config.js at the root of your project

npx tailwindcss init

3. Create postcss.config.js at the root of your project

// postcss.config.js

const cssnano = require('cssnano')({preset: 'default'})

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [

    whitelistPatterns: [/svelte-/],

    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []

const production = !process.env.ROLLUP_WATCH

module.exports = {
  plugins: [
    ...(production ? [purgecss, cssnano] : [])

4. Import Tailwind CSS to src/App.svelte

  import { Router } from "@sveltech/routify";
  import { routes } from "../.routify/routes";

<style  global>
  /* purgecss start ignore */
  @import 'tailwindcss/base';

  @import 'tailwindcss/components';
  /* purgecss end ignore */

  @import 'tailwindcss/utilities';

  /* Don't forget to remove unused styles in global.css */
  @import "../static/global.css";

<Router {routes} />

5. Edit rollup.config.js to make svelte-preprocess load postcss.config.js

Change the value of postcss property to true like the snippet below.

svelteWrapper: svelte => {
    svelte.preprocess = [
        postcss: true, /////// HERE ///////
        defaults: { style: 'postcss' }

Testing by using Tailwind CSS classes in src/pages/index.svelte

For Example:

<h1 class="text-red-900 font-bold">This heading is styled by Tailwind CSS</h1>

Within a <style> tag, make sure to add the proper lang attribute:

<style lang="postcss">
  h1 {
    @apply text-red-900 font-bold; // lang attribute allows for multiple classes per @apply line

Run the script npm run dev:nollup, then visit http://localhost:5000. If you see the text in red color, Tailwind CSS works.

Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.