Routify and tailwind

A guide on how to integrate routify and tailwind css. Note this is a community written guide by GHOST and thaicodingdev.

Clone the template

Get the latest routify template.

mkdir my-routify-app | cd
npx @roxi/routify init

1. Installing dependancies

You will need (Some of these are already installed with routify templates):

• Autoprefixer (Automatically adds vendor prefixes to our code)
• Cssnano
• Tailwind
• Postcss Import
• Svelte Preprocess
• Postcss (Allows us to impliment tailwind, autoprefixer, etc)

Command to install above:

npm i autoprefixer tailwindcss postcss-import cssnano svelte-preprocess postcss -D

2. Create the config files

Tailwind config

First we need to create a tailwind config file, so make a file called tailwind.config.js in your directory
The contents should be this:

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  plugins: [],
  purge: {
    content: ["./src/**/*.svelte"],
    enabled: production,
  },
};

Postcss config

Now we need to create a postcss config file, so make a file called postcss.config.js in your directory
The contents should be this:

const production = !process.env.ROLLUP_WATCH;

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("postcss-import"),
    ...(production
      ? [require("autoprefixer"), require("cssnano")({ preset: "default" })]
      : []),
  ],
};

Autoprefixer config

We need to create a small config file for autoprefixer, in your directory create a file called .browserslistrc
The contents should be this:

last 8 version

Rollup config

Finally we need to edit our rollup config, so in your rollup.config.js
You need to find the plugins section, then svelte, then preprocess. By default it will look something like this

preprocess: [
	autoPreprocess({
		postcss: { plugins: [postcssImport()] },
		defaults: { style: 'postcss' }
	})
]

You need to change it to:

preprocess: [
	autoPreprocess({
		postcss: require('./postcss.config.js'),
		defaults: { style: 'postcss' }
	})
]

You also need to find the line:

const production = !process.env.ROLLUP_WATCH;

and add the following under it:

process.env.NODE_ENV = production ? "production" : "development";

Note: Removed the postcss import from your rollup file if it's there

3. Import tailwind

Inside your App.svelte, inside a global style block, import the ones you need

<style  global>
  @import "../assets/global.css";
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

All done!

You can now run it with npm run dev