Maz
Maz

Hi everyone, I'm here to show you my package which is a development environment for creating theme for OctoberCMS with TailwindCSS.

It provides to you a webpack advanced configuration to mange all your assets: css, javascript, images, fonts. But also all your views: layouts, partials, content.

It includes a live server for hot reload on every files built with webpack, html/txt included.

You'll probably show it in the theme marketplace soon, but for now you can access it from the repo: RomainMazB/octobercms-tailwindcss-boilerplate. Look at the readme file to know how to use it :)

Hope you'll enjoy it. Feel free to create an issue or feedback!

Last updated

BennoThommo
BennoThommo

Nice one, Maz!

Maz
Maz

TL;DR; I'm currently trying to implement the OctoberCMS's twig special filters: it's annoying to insert image with this weird way:

<img src=<%=require("./../images/october.png")%> />

And it causes some problems: the URL is hard-coded in the template, with your local environment APP_URL. So when you deploy the website, all images seems broken. I didn't realize it on the first push.

The problem is I need to refer the require method with a related path from the actual template file to be added as a dependency for webpack, but theme filter need an URL from the root folder. I need to create a loader for webpack to handle this.

For now to avoid this problem: when you have finished your theme, you have two solutions:

  • Change the APP_URL in the .env file with the production url and build before upload
  • If SSH and npm installed on server: you can upload and build the theme directly from the server

But the problem is you can't publish for now a theme in the marketplace which have been created with my tool... because the assets will be hardcoded with the developper's local url.

Last updated

Maz
Maz

|theme filter now supported!

Just pushed the update: any jp(e)g, gif, png, ico files in a twig theme filter will be added as a dependency to webpack with a custom loader.

Now just use as you did in your src folder:

{{ 'assets/images/myimage.png'|theme }}

The file will be copied in your theme assets!

Feel free to say me some kind of stuff you may need for you themes.

1-4 of 4