No description, website, or topics provided.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Craft 3 Style Inliner Plugin

A Twig tag for inlining styles in a template.


This plugin requires Craft CMS 3.0.0 or later.


To install this plugin, follow these instructions.

  1. Open your terminal and go to your Craft project:
cd /path/to/project
  1. Tell Composer to require the plugin:
composer require enovatedesign/craft-style-inliner
  1. In the Control Panel, go to Settings → Plugins and click the “Install” button for Style Inliner.


Inline CSS

Use the {% inlinecss %}{% endinlinecss %} tag pair in your templates.


{% inlinecss %}
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            h1 { color: red }
        <h1>Hello, world!</h1>
{% endinlinecss %}


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
            h1 { color:red }
        <h1 style="color: red;">Hello, world!</h1>

Critical CSS

You can inline entire local CSS files in to the <head> of a document with the {% criticalcss %} twig tag.

{% extends "_layout.twig" %}

{% criticalcss 'home' %}

The .css extension is added automatically. By default the plugin prefixes the @webroot/ alias, but this can be configured in a config file:



return [
    'criticalPrefix' => '@webroot/resources/',