Use Tailwind CSS

TLDR: If you want to start the brand new Routify2 Starter Template with Tailwindcss, just run this command in an empty directory.

npx @roxi/routify init --branch 2.x && npx routify-tailwindcss

This will do all the work below for you, so you can just run npm run dev:nollup and enjoy blazing-fast dev exp.

1. Install the devDependencies

  • tailwindcss
  • autoprefixer@9 - a PostCSS plugin which parses your CSS and adds vendor prefixes (version10 does not work with the current rollup-plugin-postcss)
  • cssnano - to ensure that the final CSS file is as small as possible for a production environment
  • rollup-plugin-postcss - so we can import CSS directly in the script tag
npm i -D tailwindcss autoprefixer@9 cssnano rollup-plugin-postcss

2. Create tailwind.config.js at the root of your project

and put this content in it.

// tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: ["./src/**/*.svelte"],
  theme: {
    extend: {
      fontFamily: {
        sans: [...defaultTheme.fontFamily.sans],
      },
    },
  },
  variants: {},
  plugins: [],
};

To add a new font, just copy the font link tag to the head section of the ‘./static/__index.html’.

  <!-- ./static/__index.html -->
  <head>
      <!-- ... -->
      <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

      __SCRIPT__
  </head>

Then add the font name to the fontFamily property in tailwind.config.js

Example:

// tailwind.config.js
  // ...
    theme: {
      extend: {
        fontFamily: {
          sans: ['Roboto', ...defaultTheme.fontFamily.sans],
        },
      },
    },
  // ...

3. Create postcss.config.js at the root of your project

// postcss.config.js

const cssnano = require('cssnano')({ preset: 'default' });

const production = process.env.NODE_ENV === 'production';

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...(production ? [cssnano] : []),
  ],
};

4. Create ./src/tailwind.css and import it to ./src/App.svelte

Create tailwind.css under the src directory and add the content below.

/* ./src/tailwind.css */
@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

After that add import './tailwind.css' to the ./src/App.svelte

<!-- ./src/App.svelte -->
<script>
  import { Router } from "@roxi/routify";
  import { routes } from "../.routify/routes";
  import './tailwind.css';
</script>

<style  global>
  @import "../static/global.css";
</style>

<Router {routes} />

Don’t forget to remove all the CSS in './static/global.css' in case you don’t use the style in it.

5. Edit rollup.config.js to make rollup use postcss and make tailwindcss purgecss in build time.

Add the code below to the rollup.config.js file.

// rollup.config.js

import postcss from 'rollup-plugin-postcss';

const production = !process.env.ROLLUP_WATCH;
// This will make Tailwind CSS purgecss work in build time.
process.env.NODE_ENV = production ? 'production' : 'development';

// under config object, add postcss plugin to the rollupWrapper property like this:
rollupWrapper: (rollup) => {
    rollup.plugins = [
      ...rollup.plugins,
      postcss({ plugins: [postcssImport()] }),
    ];
    return rollup;
  },

So, your rollup.config.js should look like this:

// rollup.config.js
import { createRollupConfigs } from './scripts/base.config.js';
import autoPreprocess from 'svelte-preprocess';
import postcssImport from 'postcss-import';
import postcss from 'rollup-plugin-postcss';

const production = !process.env.ROLLUP_WATCH;
process.env.NODE_ENV = production ? 'production' : 'development';

export const config = {
  staticDir: 'static',
  distDir: 'dist',
  buildDir: 'dist/build',
  serve: !production,
  production,
  rollupWrapper: (rollup) => {
    rollup.plugins = [
      ...rollup.plugins,
      postcss({ plugins: [postcssImport()] }),
    ];
    return rollup;
  },
  svelteWrapper: (svelte) => {
    svelte.preprocess = [
      autoPreprocess({
        postcss: { plugins: [postcssImport()] },
        defaults: { style: 'postcss' },
      }),
    ];
  },
  swWrapper: (worker) => worker,
};

const configs = createRollupConfigs(config);

export default configs;

Testing by using Tailwind CSS classes in src/pages/index.svelte

For Example:

<!-- ./src/pages/index.svelte -->
<script>
  import { metatags } from '@roxi/routify';
  metatags.title = 'My Routify app';
  metatags.description = 'Description coming soon...';
</script>

<h1 class="text-red-500">Hello World</h1>

Run the dev script npm run dev:nollup, then visit http://localhost:5000. If you see the text in red color, Tailwind CSS works.


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