A free, minimal boilerplate theme for OctoberCMS using Tailwindcss.
I created this theme based on my personal needs, I hope somebody else will find it useful, too :-) There are other TailwindCss themes on October - they did not work for me for several reasons, nevertheless I would like to thank their authors for many great inspirations!
- Maintains modularity of the OctoberCMS - node_modules, and npm install/run executed only in the theme folder
- Minimal setup, no bloated extras. Just one layout and one basic page
- Easy to customise colors - all colors are defined in
- No bloatware - just one additional css file to restore minimal formatting
- Uses laravel-mix
- Hot-reload for easy theme and site development
- VueJS ready - just uncomment everything in
app.jsto add vue support to your app
This theme has no options - developers who need them can quickly add them as explained in OctoberCMS docs: https://octobercms.com/docs/themes/development#customization
The theme uses a limited color selection. In the file
tailwind.config.js you can find four sets of colours: primary, secondary, tertiary and grey, each of them with five variations: lightest, light, default, dark, and darkest.
There is an advantage to this setup - you can quickly change colors in the whole app, just by changing the primary & secondary colors.
If you prefer to use standard TailwindCSS colours, remove the whole 'colors' section from the above file.
You may modify the theme directly after downloading it from the Marketplace, however a suggested approach is to duplicate it, provide it with a new name, and work on your freshly created copy.
You must first install the theme dependencies. In the theme folder, execute:
Theme Customisation and Development
In webpack.mix.js replace site name in the following line:
If you use built-in php/laravel server (php artisan serve), the default value should work for you.
When you run the command below:
npm run watch
you can open your site with hot-reload at http://localhost:3000
Optional CSS: htmlcontent.css
I found it useful to restore basic formatting options after normalize.css removes all formatting. The only custom css file in the theme contains a couple of basic formatting options that will be applied to any DOM element with a class
.html-content. The way I use it - and thus included in the theme - is by adding the class
.html-content to any divs where user-generated content may appear (e.g. blog posts, comments).
Use 'npm run prod' to compile your assets with purge and minimize options.
npm run prod
When you deploy your site, you do not need to copy the node_modules folder! It is a huge folder, over 100Mb, and it is only needed in the development stage. It is utterly useless in the production environment (if you do need that folder in the production environment, you know what you're doing and you can ignore this comment)
The theme is ready to support vue - all you have to do is uncomment the contents of assets/src/js/app.js When you run npm install in the setup phase, all support libraries for using vue will be downloaded and ready to use, but they will not be loaded unless you activate vue in app.js
This theme has not been reviewed yet.
Jun 23, 2020