Introduction

Twig Starter Template is a minimal, modern PHP starter that combines the power of Twig templating with Tailwind CSS v4 and Preline UI components.

This documentation site is built using the template itself.

Installation

Prerequisites

PHP 7.4 or higher
Composer
Node.js & npm

Clone the repository

$ git clone https://github.com/python-fuse/twig-starter-template.git

$ cd twig-starter-template

Install dependencies

$ composer install

$ npm install

Quick Start

Build the CSS and start the development server:

$ npm run build:css

$ php -S localhost:8000 -t src

Open http://localhost:8000 in your browser.

Project Structure

twig-starter-template/
├── src/
│   ├── index.php          # Router & entry point
│   ├── templates/         # Twig templates
│   │   ├── base.twig
│   │   └── ...
│   ├── styles/
│   │   ├── tailwind.css   # Tailwind config
│   │   └── out.tailwind.css
│   └── js/
│       └── preline.js     # Preline UI
├── cache/twig/
├── vendor/
├── composer.json
└── package.json

Routing

Routes are defined in src/index.php using a simple switch statement:

switch ($path) {
    case '/':
        echo $twig->render('landing.twig', [
            'title' => 'Home'
        ]);
        break;
}

Twig Templates

Templates use Twig's inheritance system. Extend the base template:



My Page


    <h1>Hello, {{ name }}</h1>

{% endblock %} {% block content %} {% endblock %} {% block title %} {% extends "base.twig" %}

Tailwind CSS

Tailwind v4 uses CSS-first configuration in src/styles/tailwind.css:

@import "tailwindcss";

@source "../templates/**/*.twig";
@source "../**/*.php";

@theme {
    --color-brand: #8BC34A;
}

Run npm run watch:css during development for auto-rebuilds.

Preline UI

Preline UI components are pre-configured. Use them directly in your templates:

<div class="hs-dropdown relative">
    <button class="hs-dropdown-toggle ...">
        Dropdown
    </button>
    <div class="hs-dropdown-menu hidden ...">
        ...
    </div>
</div>

Browse all available components at preline.co/docs