This theme is not a theme!
TailwindCSS Boilerplate is, as you guess: a boilerplate. It's a webpack advanced configuration for OctoberCMS to create some awesome themes quickly with: TailwindCSS and PostCSS.
It's an development environment which comes with: a live server, auto css and js injection in your layouts, css and js minifier, all assets manager (fonts, images), and so on.
It's a tool by a developper, for developpers.
Feel free to submit push request or issue on GitHub repository!
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.
TailwindCSS, Webpack and PostCSS is already installed and pre-configured to work together. Each configuration file is pre-built but customizable.
This boilerplate comes with webpack and fully customised
PostCSS is the prepocessor of this boilerplate with the most used plugins. Feel free to add the plugins you want into the
PurgeCSS & Minification
To ensure the optimization of your final theme, all unused CSS will be removed with PurgeCSS, and all the JS and CSS files will be minified
Auto-injection of CSS/JS
All the files presents in the layouts directory will receive the CSS/JS due to the Webpack auto-injection and a special rule for this directory.
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 on every build webpack makes.
How to use
The theme is not prebuilt, when installed, you may see some errors: it's a normal behavior, I wanted to 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. This toolkit uses
APP_URL inside of it to serve local server with BrowserSync and to correctly sets the paths of the assets. Be sure that it's correctly defined.
Then, follow this quick steps:
- After installation of this toolkit (with git clone or from the OctoberCMS themes marketplace): rename the folder to what you want your theme's name to be.
- Modify the theme.yaml from sourcecode or OctoberCMS's administration with the theme's name, description, author, and so on...
- Launch a terminal
npm installfrom the theme's root directory to install dependencies.
npm run watchto run the the development server with hot reload.
- The best and my favorite part: Have fun with coding!
Be aware of the fact that every times you create a new file, it can't be detected by the devServer, you need to reload
npm run watch command.
Folder structure, where to put your code.
Due to the pre-built configuration, you need to ensure all the modifications you make stay in the
src directory. All directories, subdirectories and files will be cleaned and recreated by webpack on the root of the the theme'sroot folder. Think of the
src directory as your
The default directories and files structure of this boilerplate are:
After webpack build, all the relevant files in the src will be parsed and placed on the same structure from the root folder.
This theme has not been reviewed yet.
Feb 06, 2020
Jan 13, 2020