Module RockFrontendTailwind - A Tailwind Starter Profile for RockFrontend

[gebeer]

Hello all,

I have released RockFrontendTailwind, an extension module for RockFrontend. It extends Bernhard's module and adds an installation profile for site development with Tailwind CSS. Obviously RockFrontend is a required dependency for my module to work.

This module aims to give you a quick start with a Tailwind based project. 

What RockFrontendTailwind does:

A folder "rockfrontendtailwind" will be installed in site/templates. That folder contains all the configuration files needed to get you started with a webpack-based build pipeline for JS and CSS with

• webpack
• tailwindcss
• postcss with postcss-preset-env (for autoprefixing)
• babel (for transpiling)

So rather than just building the CSS with Tailwind, the build pipeline also takes care of transpiling your Javascript based on configuration in a .browserslist file. Of course, the setup is opinionated. But people who are comfortable working with webpack can easily adjust / extend the configuration to their liking. The default configuration watches your JS and CSS files and compiles them into site/templates/assets main.css and main.js by default. All paths are configurable through a .env file. Live reloading during development is not part of the webpack configuration since this is handled by RockFrontend already in a very efficient way.
Also a _main.php file including a very basic boilerplate for a typical setup will be placed insite/templates. It includes examples on how to render your JS and CSS assets.

More detailed instructions over at github.

Adding new profiles to RockFrontend through your own modules is quite straight forward thanks to the clear structure in @bernhard's module. RockFrontendTailwind can serve as a boilerplate. The only important thing is that the "profiles" folder structure remains the same.

The module is currently in beta but runs very stable. It will eventually be released as an official module in the directory soon. If you want to give it a shot, I shall be happy to hear your feedback.

If you are looking for a standalone webpack build pipeline with webpack-dev-server, you might want to have a look at https://github.com/gebeer/tailwind-css-webpack-processwire-starter

Happy Coding! 

[gebeer]

@HMCB

thanks for the Like on my post. In case you want to use my module, you need to update npm package versions to the latest ones. Haven't done that in a while...

[bernhard]

It might also be worth mentioning that there's also a RockFrontend site profile now that has tailwindcss support: https://github.com/baumrock/site-rockfrontend ? 

[gebeer]

Just now, bernhard said:

It might also be worth mentioning that there's also a RockFrontend site profile now that has tailwindcss support: https://github.com/baumrock/site-rockfrontend ? 

Yeah, that one is actually pretty cool, because you can mix UIKit styles (or any Framework for that matter) with Tailwind. It has no fully featured webpack setup like my module, though.