Kirby CMS & Tailwind CSS setup

This template based on Patrick Evans github project kirby-vite-tailwindcss-starter.

It uses the Kirby plainkit version of Kirby CMS while leveraging Vite and Tailwind CSS.

Prerequisites

• Nodejs with either npm or yarn (for frontend)
• PHP 7.4+
• Kirby CMS is free to try on your local machine, however, for production, you will need to purchase a license

Setup

1. Load repo to your local machine.

• Download this repo or
• Clone the repo

2. Once installed on your local machine, while in the root directory run the command yarn or npm install to install Vite, Tailwind CSS and other dependencies.

Usage

For development run:

1. open two terminal windows
2. on the first terminal run $ php -S localhost:8080 kirby/router.php to start local Kirby development-server
3. on the second run $ npm run dev to start tailwind development-server
4. run $ npm run build to build the project into /public/dist/.

If you are using the build in Kirby development-server, Kirby is looking for changes under http://localhost:3000/@vite/client and http://localhost:3000/index.js.

When Kirby runs in a productive environment it implements the build files from /public/dist/.

Code snippet in header.php to toggle development and production mode:

<?php if (c::get('debug')) { ?>
  <!-- Development Scripts -->
  <script type='module' src='http://localhost:3000/@vite/client'></script>
  <script type='module' src='http://localhost:3000/index.js'></script>
<?php } else { ?>
  <!-- Production Scripts -->
  <?= css('public/dist/index.css') ?>
  <?= js('public/dist/index.js') ?>
<?php } ?>

License

MIT License © 2021 Patrick Evans