Mix Tag

Overview

Laravel Mix is an Webpack API wrapper for compiling and building CSS and JavaScript files. The mix tag returns the path to a versioned Mix file. Don't worry, if you're not using versioning it will return the path to the non-versioned file.

Webpack and asset compilation can be a pretty complicated task and Laravel Mix does a really good job of simplifying it as far as it can possibly go.

// CSS
<link href="{{ mix src='/css/tailwind.css' }}" rel="stylesheet">
 
// JavaScript
<script src="{{ mix src='/js/app.js' }}"></script>

// CSS
<link href="{{ Statamic::tag('mix')->src('/css/tailwind.css') }}" rel="stylesheet">
 
// JavaScript
<script src="{{ Statamic::tag('mix')->src('/js/app.js') }}"></script>

Default Directory

By default Mix will assume that the mix-manifest.json file that points to the proper file locations is in your public/ directory. If your file is configured to build elsewhere you can point to it with the in parameter.

<link href="{{ mix src='/css/tailwind.css' in='assets' }}" rel="stylesheet">

<link href="{{ Statamic::tag('mix')->src('/css/tailwind.css')->in('assets') }}" rel="stylesheet">

Related Reading

• Laravel Mix docs
• Laravel Mix FAQs
• Using TailwindCSS with Laravel Mix
• Webpack

Parameters