Jump to content

ProcessWire Tailwind CSS webpack postcss starter


gebeer
 Share

Recommended Posts

I have setup a starter kit for developing PW sites with Tailwind CSS. You can find it at https://github.com/gebeer/tailwind-css-webpack-processwire-starter

I know, I'm a bit late to the party with Tailwind. In fact I only discovered it a couple of months ago and found it to be a very interesting concept.

It took quite some time to get a pure webpack/postcss/tailwind setup that features live reloading dev server, cache busting, supports babel as well as autoprefixing and works well with PW. For the cache busting part I developed a small helper module that utilizes webpack.manifest.json to always load the assets with the correct file hashes for cache busting. No more timestamps, version numbers or the like required. The little helper can be found at https://github.com/gebeer/WebpackAssets

Having used it for the first time in production on a client project I have to say that I really enjoy working with Tailwind. The concept of using utility classes only really convinced me after having put it to practice. During the work on the client project, some quirks with webpack-dev-server came to surface. I was able to solve them with the help of a colleague and now it is running quite stable in both Linux and Mac environments. I am fascinated by the fast build times compared to using webpack/gulp or gulp/sass. Also the small file size of the compiled CSS is remarkable compared to other frameworks. So this will be my goto setup whenever I am free to choose the frontend framework for a project.

If anyone feels like they want to give it a try, I shall be happy to get your feedback

  • Like 7
  • Thanks 2
Link to comment
Share on other sites

Hi @gebeer. Using webpack nowadays feels a little bit outdated for me, because with vite (from the creator of vue.js) setup is so much simpler and faster, and it comes with first-class support for most frameworks like Tailwind or vue out of the box. But it can't do all things webpack does (not yet).

Two or three years ago I used a similar approach to what you did now, as you can see in my jmartsch/acegulpandpack: A set of gulp tasks with JS transpilation, webpack, SVG Sprites and minification (github.com) repo.

With vite you use native ES modules instead of transpiling and bundling every time something changes. This makes the development process much (MUCH) faster.

If you ever seen it in action, you would not like to go back to webpack.

If you guys are interested in a modern build environment for your CSS and JS, I could see if I find the time to write a tutorial for it.

  • Like 5
Link to comment
Share on other sites

26 minutes ago, dotnetic said:

Hi @gebeer. Using webpack nowadays feels a little bit outdated for me, because with vite (from the creator of vue.js) setup is so much simpler and faster, and it comes with first-class support for most frameworks like Tailwind or vue out of the box. But it can't do all things webpack does (not yet).

Two or three years ago I used a similar approach to what you did now, as you can see in my jmartsch/acegulpandpack: A set of gulp tasks with JS transpilation, webpack, SVG Sprites and minification (github.com) repo.

With vite you use native ES modules instead of transpiling and bundling every time something changes. This makes the development process much (MUCH) faster.

If you ever seen it in action, you would not like to go back to webpack.

If you guys are interested in a modern build environment for your CSS and JS, I could see if I find the time to write a tutorial for it.

That sounds intriguing. I'm happy with my setup and the build time is pretty fast already. Seems like every couple of years a new tool is being hyped as faster, easier, better etc. I'll definitely have a look at vite but for the moment I'm going with webpack. A repo where we can look at some vite setup code with PW would be welcome. Don't think it is necessary to have a tutorial, though. I am sure there are tons out there already. But thank you.

  • Like 2
Link to comment
Share on other sites

17 minutes ago, gebeer said:

Seems like every couple of years a new tool is being hyped as faster, easier, better etc.

That's true. Sadly I am a performance junky and interested in new and shiny things, and so I try out almost everything. Another hint: Use bun instead of npm for installing npm modules. It is sooooo much faster. It can do much more, but I use it just as a npm replacement for now.

  • Like 6
Link to comment
Share on other sites

What about we make this some kind of universal profile which works with webpack, bun, npm, yarn, vite... whatever.
Or at least use this a guide for setting up all of those different setups.

I never really used any of these tools - at least six months or so ago - right now I use NPM due to other tools I use now and therefore kind of started to like it (and as it's super portable through all OS I use, have to use or play around with).

As soon as I am back at home I could provide a NPM/TailwindCSS/AlpineJS/browser-sync setup.

Pre-Version of the mentioned above can be found here:
https://github.com/webmanufaktur/processwire-addon-tailwindcss (WIP at best for now)

  • Like 4
Link to comment
Share on other sites

Thank you for all your valued feedback so far. This is an opinionated setup, like almost all of webpack setups are in a way. I'm using this as a working starter and therefore tried to keep it as lean as possible, only concentrating on tailwind, postcss, babel. If I needed to add other libs like Alpine etc. it can be easily extended. 

  • Like 4
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...