Installating Svelte & Integrating Tailwind CSS (and PostCSS)
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:
To get set up with Svelte, we will require the installation of Node.js and Degit. I won't cover how to get these set up in this article as it expects a bit of knowledge of Node and the Terminal, you can follow the installation of each at their respective sites beforehand.
Let's create a copy of the base template provided by Svelte, and install all the necessary libraries with the following.
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
I'm a huge fan of Tailwind and use it on most projects, so working with Svelte would be no different. Staying in the directory we installed Svelte into, we will need to install a few dependancies, create a new
postcss.config.js file and finally modify a couple of existing files.
Install the necessary development dependencies with the following command:
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.
Generate Tailwind Config
To overwrite the default styles provided by Tailwind, we will need to make sure we have a
tailwind.config.js in our route directory where we can put our necessary tweaks. You can do this by running the following command.
If you open up the file created you should see it looks similar to the below.
Creating our PostCSS Rules
We will need to tell Svelte how to interpret and compile our necessary code. We can do this by creating a
postcss.config.js file in the route directory. Manually create one or run the following in the terminal.
Open the file in your favourite editor and copy in the following code.
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
We'll need to include the Tailwind helpers somewhere so that all of the necessary styles can be pulled in. Open up the
App.svelte file in the
src/ folder, and add the following code to the bottom (replacing any styles that are already there).
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.
Then modify the section which looks similar to the following
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.
You can now include any of the styles as class attributes for values that already exist as seen below, or you can integrate by using the
@apply method throughout your Svelte components.