PHPackages                             enovatedesign/craft-style-inliner - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. enovatedesign/craft-style-inliner

ActiveCraft-plugin[Templating & Views](/categories/templating)

enovatedesign/craft-style-inliner
=================================

Inline & critical CSS tags for email templates in twig.

4.1.1(1y ago)766.2k↓37.5%4[1 issues](https://github.com/enovatedesign/craft-style-inliner/issues)MITPHPPHP ^8.2.0CI failing

Since Jul 19Pushed 7mo ago5 watchersCompare

[ Source](https://github.com/enovatedesign/craft-style-inliner)[ Packagist](https://packagist.org/packages/enovatedesign/craft-style-inliner)[ RSS](/packages/enovatedesign-craft-style-inliner/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (3)Versions (30)Used By (0)

Craft 5 Style Inliner Plugin
============================

[](#craft-5-style-inliner-plugin)

> A Twig tag for inlining styles in a template.

Requirements
------------

[](#requirements)

This plugin requires Craft CMS 5.2 or later.

Installation
------------

[](#installation)

To install this plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

```
cd /path/to/project
```

2. Tell Composer to require the plugin:

```
composer require enovatedesign/craft-style-inliner
```

3. Install the plugin via ./craft install/plugin enovatedesign/craft-style-inliner via the CLI, or in the Control Panel, go to Settings → Plugins and click the “Install” button for Style Inliner.

Usage
-----

[](#usage)

### Inline CSS

[](#inline-css)

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

Input:

```
{% inlinecss %}

            h1 { color: red }

        Hello, world!

{% endinlinecss %}
```

Output:

```

            h1 { color:red }

        Hello, world!

```

### Critical CSS

[](#critical-css)

You can inline entire local CSS files in to the `` 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. You can also switch critical CSS on and off entirely for each environment:

`/config/style-inliner.php`

```