DEV Community

loading...
Cover image for Simplest way to set up Svelte with Tailwind CSS

Simplest way to set up Svelte with Tailwind CSS

Mate Bek
418 I’m a teapot
Updated on ・2 min read

I am not here to convince you to use utility-first CSS frameworks like Tailwind, there are plenty of good resources around this topic already. Besides, you are here for a reason.

I am writing this post to provide you the simplest way to set your Svelte project up and running with Tailwind. Here we go!

Initializing your project

Start by creating a new Svelte project:

npx degit sveltejs/template svelte-tailwind && cd svelte-tailwind
Enter fullscreen mode Exit fullscreen mode

Install Svelte's dependecies:

npm install
Enter fullscreen mode Exit fullscreen mode

Setting up Tailwind CSS

Install Tailwind and its dependencies:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

Generate your tailwind.config.js and postcss.config.js configuration files:

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Configure Tailwind to remove unused styles in production

In your tailwind.config.js file, configure the purge option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds:

// tailwind.config.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: [],
}
Enter fullscreen mode Exit fullscreen mode

There is a lot going on here, let me try to explain. We want to enable PurgeCSS only when rollup is running in production mode. We are going to parse our public/index.html and all the .svelte files under src and extract all the CSS class names used in our files and components. For this to work with Svelte's class directive, we have to use our custom defaultExtractor, matching the syntax used to apply classes conditionally.

Include Tailwind in your global CSS

Use the @tailwind directive to include Tailwind's base, components, and utilities styles in your App.svelte component (we will use svelte-preprocess to parse global styles):

<!-- App.svelte -->
...
<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>
Enter fullscreen mode Exit fullscreen mode

Delete the public/global.css file and remove <link rel='stylesheet' href='/global.css'> from public/index.html not to interfere with the Tailwind styles.

Configure PostCSS with Svelte preprocessor

Install the Svelte preprocessor dependencies:

npm install -D svelte-preprocess postcss-load-config
Enter fullscreen mode Exit fullscreen mode

Modify your rollup.config.js to include the postcss plugin in your Svelte preprocessors:

// rollup.config.js
...
import sveltePreprocess from "svelte-preprocess";
...
export default {
  ...
  plugins: [
    svelte({
      ...
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: true,
      }),
    }),
...
Enter fullscreen mode Exit fullscreen mode

Time to try out our work!

Copy any of the preview layouts from Tailwind UI to your source, run npm run dev and visit http://localhost:5000:

Preview Dashboard

Not what you are looking for?

If you are looking for ways to configure Tailwind CSS with other frameworks, check out the official installation guide.

Discussion (8)

Collapse
tehmoros profile image
Piotr "MoroS" Mrożek • Edited

When doing this from scratch, you might run into PostCSS complaining about the lack of configuration files and basically doing nothing. The one thing missing to glue everything together in this case is the postcss.config.js file. The simplest version of this file, that includes Tailwind and Autoprefixer, is given here: tailwindcss.com/docs/installation#...

EDIT: Alternatively, you can simply add PostCSS configuration for rollup.config.js instead of the postcss: true line (to keep the number of files in project root to a minimum):

//...
  postcss: {
    plugins: [
     require("tailwindcss"), 
     require("autoprefixer"),
    ],
  },
//...
Enter fullscreen mode Exit fullscreen mode
Collapse
tonyketcham profile image
Tony Ketcham

Thank you for the defaultExtractor point. That fixed the purging of dynamic class attributes for me which I was stuck on for my Sapper template!

Collapse
tonyketcham profile image
Tony Ketcham

I gave you credit for that as well in my Tailwind 2 Sapper starter, thanks again!

Collapse
justingolden21 profile image
Justin Golden

This is the first guide to actually work for me, although it takes an absurdly long time (over 30 seconds) to reload, despite being a hello world project and saying it takes 0.1 seconds.

Collapse
arnu515 profile image
arnu515

Use Tailwind's JIT mode by setting mode: "jit" in the tailwind.config.js file

Collapse
davidlaytonuk profile image
David Layton

Is there a way that I can use @apply at a component level?

Collapse
teds31 profile image
Teddy Stanowski

yes you can, so far everything is normally working.

Collapse
joshuachu profile image
Joshua-Chu

Hi, I'm kinda new to using tailwind with svelte. I was wondering if this setup would work just fine during production?