Setting up Svelte & Integrating Tailwind CSS

Jack Whiting
Dec 4, 2019 · 4 min read

This article is part of a series of posts about Working with Svelte. The topics and articles we have (or will) cover are as follows:

  1. Setting up Svelte & Installing Tailwind CSS and PostCSS
  2. Setting up Routing with Page.js
  3. Optimising Our Router For Large Applications (Coming Soon)
  4. .. and more

Image for post
Image for post

Svelte is an awesome underdog in JavaScript frameworks and is climbing the ranks currently due to the way it compiles your scripts and HTML. Svelte is inherently a compiler and all of your components files get compiled into pure JavaScript. You can find out more about Svelte through their website.

Install Svelte

Let’s create a copy of the base template provided by Svelte, and install all the necessary libraries with the following.

npx degit sveltejs/template my-svelte-project 
cd my-svelte-project
yarn # or npm install

To test everything is working properly, we can run yarn dev and we should be able to see the default page at https://localhost:5000. If you can't you may want to ensure nothing went wrong with the setup.

Set up Tailwind

Install Dependancies

yarn add --dev postcss postcss-load-config svelte-preprocess tailwindcss

If you want to make sure unused styles are removed when in production (keeping our file size lean), you can also add the following dependency.

yarn add @fullhuman/postcss-purgecss

Generate Tailwind Config

npx tailwind init

If you open up the file created you should see it looks similar to the below.

module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
}

Creating our PostCSS Rules

touch postcss.config.js

Open the file in your favourite editor and copy in the following code.

const purgecss = require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.svelte', './src/**/*.html'],
whitelistPatterns: [/svelte-/],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})

module.exports = {
plugins: [
require('tailwindcss'),
...(!process.env.ROLLUP_WATCH ? [purgecss] : [])
]
}

To explain the above a little, we first create a ruleset for Purge CSS which will look through all Svelte and HTML files and remove any classes that do not match what is included. We’ll also add a whitelist pattern to ensure that any Svelte generated classes are not removed unnecessarily.

We then watch on whether the process.env.ROLLUP_WATCH equates to true, if not, we purge, if true then we are in development and we just compile the Tailwind classes.

Integrating with Svelte

<style global>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

Then we’ll need to ensure Svelte runs the preprocessors on any code in our <style> tags. To do this, we'll need to open the rollup.config.js file in your editor and add the following at the top of the file.

import sveltePreprocess from 'svelte-preprocess'

Then modify the section which looks similar to the following

...
svelte({
...
preprocess: sveltePreprocess({ postcss: true }),
...
})
...

We should now have Tailwind fully integrated into Svelte. If you rerun yarn dev in your terminal you should see it compile the styles before page load and you'll have a stripped back page to jump into.

Usage

<h1 class="font-bold">Title</h1>

or

<style>
h1 {
@apply font-bold text-2xl;
}
</style>

Originally published at https://jackwhiting.co.uk.You can find more articles like these or about PHP, JavaScript, Vue, Svelte or Freelancing on my site.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store