Routify 3 public BETA is here! Check it out

Routify and tailwind

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

Getting Started

This guide is desinged for the routify starter template, and should only be a few steps to get up and running! To start lets create our project:

mkdir my-routify-app

cd my-routify-app

npx @roxi/routify init

Set up tailwind

  1. Install

    npm i tailwindcss -D
  2. Config

    • We need a tailwind config file, so create a tailwind.config.js in your project folder, it’s contents should look like this:

      module.exports = {
        purge: ['./src/**/*.svelte', './src/**/*.css'],
    • Update your postcss.config.js to include tailwind

      module.exports = {
          plugins: [
              // Keep current plugins and add tailwind below:

Adding our css

In your global.css file (which can be found here: src/global.css), add your tailwind @ rules:

@tailwind base;
@tailwind components;
@tailwind utilities;

You can remove all the default styles from your global css file since you now have tailwind, but it might be good to include a css reset like greset or modern normalize

All done!

You can now run it with npm run dev! If you have any issues join the discord

Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.