DEV Community


Svelte with Tailwind CSS

skfrozencloud profile image SK ・1 min read

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:

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
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: [
    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
    // etc...
    preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
            plugins: [
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;  
Enter fullscreen mode Exit fullscreen mode


This was heavily influenced by these posts:

Discussion (0)

Editor guide