57
Free
Add to project

Product support

Visit this product's website for support.

Categories

TailwindCSS Boilerplate Theme

This is not a theme, it's much more!

TailwindCSS Boilerplate theme is not a theme, it's a boilerplate to create some awesome themes with all the developper's tools included: TailwindCSS, Webpack, BrowserSync already configured to build with the OctoberCMS's directory structure, PostCSS with some the majors plugins, PurgeCSS, and all of this managed with NPM.

Have fun!

TailwindCSS/Webpack/PostCSS ready

TailwindCSS, Webpack and PostCSS is already installed and pre-configured to work together. Each configuration file is pre-built but customizable directly from your theme directory.

This boilerplate comes with webpack and fully customised webpack.config.js file for OctoberCMS to manage all your assets: css, javascript, images, fonts and also all your template files: Webpack will walk through all your directories and subdirectories presents in your theme folder to compile the .htm, .html and .txt files to catch all the assets dependencies you may have added in them!

PostCSS is the prepocessor of this boilerplate with the most used plugins. Feel free to add the plugins you want into the postcss.config.js

PurgeCSS & Minification

To ensure the optimization of your final theme: the npm run build process will remove all unused CSS with PurgeCSS, and all the JS and CSS files will be minified. Be aware that to not slow down the watch process, the purge and minification happen only on the npm run build process

Auto-clean of previous build

This boilerplate uses clean-webpack-plugin to ensure you don't have any useless files in your theme folder. Your files is cleaned only on the build process not to slow down the hot reload module.

Be noticed for any update

This Boilerplate is evolving on each update to provide more convenient way to work and fix some webpack's issue. OctoberCMS doesn't support theme update and will probably never support it for many good reasons If you want to be noticed of any update, watch the repository or follow me on twitter @RBilloir: I'll provide a tutorial for any eventual breaking change or new tips available.

The following plugin is required
RMB Boilerplate's Plugin
Free

RMB Boilerplate's Plugin

Only for use with the RMB's Boilerplates theme, totally useless without one of them

652 installations
# 602 in Free of all time.
Free

RMB Boilerplate's Plugin

Only for use with the RMB's Boilerplates theme, totally useless without one of them

Customization, Team tools

Screenshot CLI Build

How to use

The theme is not prebuilt, when installed. You may see some errors: it's a normal behavior, I wanted from you to understand how to build before actually use and customize it. You have to build it before see it.

.env file needed

First of all: if it's not already the case, be sure to run php artisan october:env, it will create an .env file at the root of your project folder.

Webpack will use APP_URL inside of it to serve the local server with BrowserSync and to correctly sets the paths of the assets. Be sure that it's correctly defined:

APP_URL=http://dummy.test

Configure the new Blank theme

The Boilerplate comes with a blank theme in the blank-src folder, and use the boilerplate.yaml configuration file to create the final theme directory. Copy the blank-src directory to the October's themes one.

In the blank-src: you can see a theme.yaml: this it the one for the Source theme, and the new-theme.yaml is the one for... the new theme, obviously. It will be renamed on watch/build process, the two files are needed to differenciate them from the backend.

As long as you modify the theme name in the boilerplate.yaml, you are free to name the new theme as you want. Eg: in boilerplate.yaml you can put the themeName to awesome-theme and create a awesome-theme-src folder which will be the src directory for your new theme. The boilerplate will generate the awesome-theme in the October's themes folder.

NPM

Again, this theme is not a theme, it's a toolkit, based on NPM. To use it, be sure to have node and npm installed on your machine.

Then, follow this quick steps:

  1. Launch a terminal from the romainmazb-tailwindcss-boilerplate directory
  2. Run npm install to install the boilerplate dependencies.
  3. Then go to the blank-src directory and launch again npm install, this will install your theme dependencies, for now just the ones required by October, PostCSS and TailwindCSS.
  4. Go back to the romainmazb-tailwindcss-boilerplate directory and run npm run watch` to run the development server with hot reload.
  5. Since a new blank theme were created, go to the October backend settings and activate your new theme.
  6. The best and my favorite part: Have fun with coding!

Be aware of the fact that every time you create a new file, it can't be detected by the devServer, you need to reload npm run watch command.

Roadmap

  • [x] Cleanup and split files to be more maintainable
  • [x] Add rules to PurgeCSS to handle Froala Editor content
  • [ ] Waiting for suggestions -> In progress...

  • Found the theme useful on 7 May, 2021

    just what I was looking for. Thanks.

  • Found the theme useful on 12 Apr, 2020

    This the first theme that I'm seriously working with on OctoberCMS. I was exactly looking for a modern Tailwind starter theme, and this one is perfectly matching my wishes!

    Special thanks to Romain, for the quick help about adding AlpineJS. Feeling now like a kid with his new toy ))

  • author

    Replied on 12 Apr, 2020

    Thanks for the comments BlueMelon, this tools was built with fun and I hope everyone will enjoy it =)

    I take this great opportunity to remember to everyone: Please before any update, take a look at the specific updates instructions in Readme file when using this theme:

    • When installed, copy the folder and rename the copied one in folder name and theme.yaml file.
    • Leave the original folder to be noticed when I push some update to it and just copy the modified files in your new theme. The list of modified files will be updated in the version.yaml at any update.

    Feel free to contact me to discuss the problems you can meet using this package :)

  • Please login to rate the theme or write a review.
1.3.0

Upgrade to TailwindCSS 2 and PostCSS8

Dec 29, 2020
1.2.0

Move PurgeCSS to the new TailwindCSS Built-in process

Jun 24, 2020
1.1.2

Fix boilerplate's plugin dependency

May 24, 2020
1.1.1

Bump tailwindcss to ^1.4.5

May 24, 2020
1.1.0

Major release!! You do not have to watch the modified files anymore.

Apr 28, 2020
1.0.4

Fix typo causing error 404 on theme.js in the layout import

Apr 13, 2020
1.0.3

Fix issue which didn't copy all the files

Mar 08, 2020
1.0.2

Fix no such file 'assets/javascript/theme.js' issue

Feb 06, 2020
1.0.1

Theme initialization

Jan 13, 2020