Skip to content
Get packs

Guide · Open source

How to use Sage: WordPress theme with Blade and Tailwind

Updated · written with AI from the project's own documentation and checked against our catalogue data

Sage is an open-source starter theme for WordPress that lets developers write theme templates with Laravel Blade and build styles and scripts with Vite and Tailwind CSS. This guide is for developers who want to build a custom WordPress theme with component-based code. After reading it, you will know what Sage needs, how it is installed, and what you can do with it.

Sageroots/sage · ★ 13.3k · MIT

Quick start

  1. 1Check prerequisites. Make sure PHP, Composer and Node.js are installed before you start.
  2. 2Clone the project. Run git clone with the Sage repository URL to get the code.
  3. 3Read the installation docs. Follow the official guide at roots.io/sage/docs/installation/ for the remaining setup.
  4. 4Build your templates in Blade. Write theme templates and components using Laravel Blade.
  5. 5Style with Tailwind and Vite. Use Tailwind CSS for styling and Vite for builds and hot-reloading during development.
  6. 6Add Acorn for Laravel features. Use Acorn if you want Laravel features inside your WordPress theme.

What Sage is and who it is for

Sage is a starter theme for WordPress. Instead of writing plain PHP templates, you write templates with Laravel Blade, a templating language from the Laravel PHP framework. Styles and scripts are built with Vite, and Tailwind CSS is supported out of the box.

Sage is a development starting point, not a ready-made theme. It is best suited to developers building custom WordPress themes, or teams already familiar with Laravel or Blade.

  • Good fit: custom WordPress themes, Tailwind CSS in WordPress, component-based template code
  • Poor fit: people who want a theme without coding, sites with no PHP or front-end experience, projects that must avoid extra build tooling

What you need before you install Sage

Sage's install method is a package manager, and the project lists PHP, Composer and Node.js as prerequisites. Because Sage relies on Vite and Node-based steps, you need a build workflow in place before the theme will run as intended.

  • PHP
  • Composer
  • Node.js

Create a new Sage project with Composer

The README's install command uses git clone with the repository URL. Sage's full installation instructions are in the official documentation linked from the project page at roots.io/sage/docs/installation/.

  • Open the official installation docs for the exact steps for your setup
  • Replace the placeholder with the repository URL when you run the command
git clone <repo url>

Build templates with Laravel Blade components

Sage lets you write organized, component-based code using Laravel Blade. This keeps template code cleaner than mixing raw PHP and markup throughout a theme.

Sage integrates with Acorn, which brings Laravel features into WordPress, so you can use Laravel's feature set in your theme.

  • Use Blade for theme templates
  • Use Acorn to access Laravel features from WordPress

Develop styles and scripts with Vite and Tailwind CSS

Sage uses Vite for the front-end workflow, which the project describes as offering instant builds and CSS hot-reloading. Tailwind CSS is supported out of the box for styling.

  • Vite handles builds and CSS hot-reloading
  • Tailwind CSS is available without extra setup in the theme

Use the block editor

Sage includes block editor support, so the theme works with WordPress's block editor (Gutenberg) as part of its built-in features.

What people use it for

  • Building a custom WordPress theme with component-based Blade templates
  • Adding Tailwind CSS styling to a WordPress site built by a developer
  • Bringing Laravel features into a WordPress theme through Acorn
  • Creating a theme that supports the block editor

Frequently asked questions

Is Sage free to use?

Sage is released under the MIT licence, as listed on its project page. Check the licence file in the repository for the full terms.

What do I need to install Sage?

The project lists PHP, Composer and Node.js as prerequisites. Sage is installed with a package manager, and it relies on Vite and Node-based build steps.

Can I use Sage without coding?

No. Sage is a development starting point for developers. People with no PHP or front-end experience will find that setup requires a build workflow.

What is Laravel Blade in Sage?

Blade is a templating language from the Laravel PHP framework. Sage uses it to write organized, component-based theme templates.

What is Acorn?

Acorn is an integration that brings Laravel features into WordPress. Sage includes integration with Acorn.

How does Sage compare to Timber, Underscores or Bedrock?

Timber, Underscores and Bedrock are comparable projects listed for this item. Sage is a WordPress starter theme built around Blade, Vite and Tailwind CSS, so pick the one whose templating and tooling fits your project.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Sage suits developers building custom WordPress themes who know Laravel, Blade or Tailwind CSS and are comfortable with a Node-based build workflow. If you want a ready-made theme or want to avoid extra build tooling, pick a different option.

Install options & downloads