DEV Community

SK
SK

Posted on

Svelte with Tailwind CSS

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
Enter fullscreen mode Exit fullscreen mode

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
  },
};
Enter fullscreen mode Exit fullscreen mode

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

import sveltePreprocess from "svelte-preprocess";
Enter fullscreen mode Exit fullscreen mode
svelte({
    // etc...
    preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
            plugins: [
                require("tailwindcss"), 
                require("autoprefixer")
            ],
        },
    }),
}),
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)