inline_css

You are reading the documentation for Twig 2.x. Switch to the documentation for Twig 1.x. 3.x.

Warning Twig version 2.x end of maintenance is scheduled for December 2023.

Questions & Feedback

Found a typo or an error?
Want to improve this document? Edit it.

Need support or have a technical question?
Ask support on Stack Overflow.

License

Twig documentation is licensed under the new BSD license.

`inline_css`

2.12

The inline_css filter was added in Twig 2.12.

The inline_css filter inline CSS styles in HTML documents:

        1
2
3
4
5
6
7
8
9
10
11
12
        {% apply inline_css %}
    <html>
        <head>
            <style>
                p { color: red; }
            </style>
        </head>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}
    

You can also add some stylesheets by passing them as arguments to the filter:

        1
2
3
4
5
6
7
        {% apply inline_css(source("some_styles.css"), source("another.css")) %}
    <html>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}
    

Styles loaded via the filter override the styles defined in the <style> tag of the HTML document.

You can also use the filter on an included file:

        1
2
3
        {{ include('some_template.html.twig')|inline_css }}

{{ include('some_template.html.twig')|inline_css(source("some_styles.css")) }}
    

Note that the CSS inliner works on an entire HTML document, not a fragment.

Note

The inline_css filter is part of the CssInlinerExtension which is not installed by default. Install it first:

        1
        $ composer require twig/cssinliner-extra
    

Then, on Symfony projects, install the twig/extra-bundle:

        1
        $ composer require twig/extra-bundle
    

Otherwise, add the extension explicitly on the Twig environment:

        1
2
3
4
        use Twig\Extra\CssInliner\CssInlinerExtension;

$twig = new \Twig\Environment(...);
$twig->addExtension(new CssInlinerExtension());
    