Simplest way to set up Svelte with Tailwind CSS

Mate Bek — Tue, 19 Jan 2021 02:43:51 +0000

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

Install Svelte's dependecies:

npm install

Setting up Tailwind CSS

Install Tailwind and its dependencies:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

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

npx tailwindcss init -p

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: [],
}

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>

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

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,
      }),
    }),
...

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:

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.

DEV Community: Mate Bek