Laravel Mix
For years, the default compiler for TailPress has been Laravel Mix. Since version 5, we switched over to Vite.
If you prefer to use Laravel Mix, follow the below steps.
Install Laravel Mix
Begin by installing Laravel Mix.
1npm install laravel-mix @tailwindcss/postcss postcss postcss-nested --save-dev
Mix configration file
Next, create a Mix configuration file within the root of your new theme.
1touch webpack.mix.js
Add the following content to this file.
1let mix = require('laravel-mix');
2let path = require('path');
3let postCss = require('@tailwindcss/postcss');
4
5mix.setResourceRoot('../');
6mix.setPublicPath(path.resolve('./'));
7
8mix.webpackConfig({
9 watchOptions: {ignored: [
10 path.posix.resolve(__dirname, './node_modules')
11 ]}
12});
13
14mix.js('resources/js/app.js', 'dist/js');
15
16mix.postCss('resources/css/app.css', 'dist/css', postCss);
17
18mix.postCss('resources/css/editor-style.css', 'dist/css', postCss);
19
20// mix.browserSync({
21// proxy: 'http://tailpress.test',
22// host: 'tailpress.test',
23// open: 'external',
24// port: 8000,
25// files: ["*.php", "**/*.php"]
26// });
27
28if (mix.inProduction()) {
29 mix.version();
30} else {
31 mix.options({ manifest: false });
32}
Postcss configration file
Next, create a postcss.config.js file.
1touch postcss.config.js
Put in the following content.
1module.exports = {
2 plugins: {
3 'postcss-nested': {},
4 '@tailwindcss/postcss': {},
5 autoprefixer: {},
6 }
7}
Switch compiler
In functions.php, swap out new TailPress\Framework\Assets\ViteCompiler with nnew TailPress\Framework\Assets\LaravelMixCompiler.
1->assets(fn($manager) => $manager
2 ->withCompiler(new TailPress\Framework\Assets\LaravelMixCompiler, fn($compiler) => $compiler
3 ->registerAsset('resources/css/app.css')
4 ->registerAsset('resources/js/app.js')
5 ->editorStyleFile('resources/css/editor-style.css')
6 )
7 ->enqueueAssets()
8)
Compile
In the package.json file, add the following scripts:
1"scripts": {
2 "dev": "mix watch",
3 "build": "mix --production"
4},
Now you should be able to run npm run dev and npm run build using Laravel Mix for compiling.