Svelte with Tailwind CSS

SK — Mon, 09 Nov 2020 13:03:37 +0000

Yet another Svelte and Tailwind CSS installation post.

I have been looking through several guides on how to install Tailwind CSS in Svelte and this is my final way of doing it. I am in no way an expert in this and there are definitely many correct ways of doing it.

Heavily influenced by these posts:
https://dev.to/swyx/how-to-set-up-svelte-with-tailwind-css-4fg5
https://dev.to/paul42/svelte-tailwind-css-minimal-install-ia2

Required: A Svelte installation

Step 1 - Install dependencies

There is a package called svelte-preprocess that will handle all CSS processing so there is no need to change the npm scripts.

npm install -D svelte-preprocess postcss tailwindcss autoprefixer

Step 2 - Setup configuration files

tailwind.config.js

// tailwind.config.js
const production = !process.env.ROLLUP_WATCH; // Or some other env var like NODE_ENV
module.exports = {
  future: { // For Tailwind 2.0 upcoming changes
    purgeLayersByDefault: true, 
    removeDeprecatedGapUtilities: true,
  },
  plugins: [],
  purge: {
    content: [
      "./src/**/*.svelte",
      "./public/**/*.html"
    ], 
    enabled: production // Disable purge in dev
  },
};

In your rollup.config.js add the import and the other lines in the bottom of the svelte section.

import sveltePreprocess from "svelte-preprocess";

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

Step 3 - Add the Tailwind styles to the app

Now in your App.svelte or Layout.svelte add this:

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

Acknowledgement

This was heavily influenced by these posts:
https://dev.to/swyx/how-to-set-up-svelte-with-tailwind-css-4fg5
https://dev.to/paul42/svelte-tailwind-css-minimal-install-ia2

DEV Community: SK

Svelte with Tailwind CSS

Step 1 - Install dependencies

Step 2 - Setup configuration files

Step 3 - Add the Tailwind styles to the app

Acknowledgement