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 6 years ago

Nice one, 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 6 years ago

|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.

Hi, just to mention for those who use my boilerplate I've just added specific updates instructions in my latest version to avoid you to lose your work:

When you first install the theme, be sure to duplicate the theme directory:

• Keep a fresh, unmodified copy of the theme to be warned when an update is made
• Work only on the duplicated/renamed theme directory, if your directly work on the installed theme folder, any update will erase your modified files!

When an update is made, I will write an exhausted list of the modified files in the version.yaml file.

You will only need to copy these files into your modified theme to be up to date. Since it's just a boilerplate, just one or two files will be modified on each update.

Have fun :)

Last updated 6 years ago

Since "Bootstrap" seems to be more searched in the marketplace, I've released a Bootstrap version for those who want. Just proposed to the marketplace.

For now, here is the repo.

Hope this will interest few more people, I'm using it for now 3 months now, and I couldn't create a theme without it anymore. Since my last message, I've created a specific plugin which is compatible with both the TailwindCSS and Bootstrap version when I faced a really annoying "bug": Webpack use a src folder to store your source files, and then build into a dist folder. This can be modified but whatever you do: the OctoberCMS backend theme editor can't handle any webpack-only configuration.

The plugin act as a liar to October: You create into the themes directory a your-theme-src folder, then webpack is configured to compile the final theme to your-theme folder, which is the one to activate.

When you activate your-theme from the backend front-end theme settings, the plugin tells to October the current theme files are in the -src folder, so even in watch mode, if you add/configure a component from the backend, webpack catches the modifications, and recompile into your-theme and reload the browser. It is impossible to modify-catch modification-compile-reload without the plugin.

Feel free to report any issue, question or how-to details!