gebeer Posted September 3, 2022 Share Posted September 3, 2022 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 9 2 Link to comment Share on other sites More sharing options...
dotnetic Posted September 4, 2022 Share Posted September 4, 2022 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. 6 Link to comment Share on other sites More sharing options...
gebeer Posted September 4, 2022 Author Share Posted September 4, 2022 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. 2 Link to comment Share on other sites More sharing options...
dotnetic Posted September 4, 2022 Share Posted September 4, 2022 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. 6 Link to comment Share on other sites More sharing options...
pwired Posted September 4, 2022 Share Posted September 4, 2022 @dotnetic thanks for posting about bun, didn't know about that one. Never did anything with javascript outside of the browser. Going trough the docs on https://bun.sh/ 2 Link to comment Share on other sites More sharing options...
wbmnfktr Posted September 5, 2022 Share Posted September 5, 2022 (edited) 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-alpinejs-barbajs Edited February 24, 2023 by wbmnfktr Updated link to repository 5 Link to comment Share on other sites More sharing options...
gebeer Posted September 5, 2022 Author Share Posted September 5, 2022 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. 4 Link to comment Share on other sites More sharing options...
Sonia Margollé Posted February 24, 2023 Share Posted February 24, 2023 On 9/4/2022 at 3:24 PM, dotnetic said: 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. Hey @dotnetic, I would be really interested !! at least by an exemple of your configuration to use vite with PW. 1 Link to comment Share on other sites More sharing options...
bernhard Posted February 24, 2023 Share Posted February 24, 2023 @Sonia Margollé have you seen RockFrontend? It's zero-setup and comes with livereloading both in the backend and frontend. There's also a tailwind starter profile for it. If you find there's something missing let me know and I can see if we can add it. 1 Link to comment Share on other sites More sharing options...
Sonia Margollé Posted February 27, 2023 Share Posted February 27, 2023 @bernhard yeah I'm gonna use it for my next PW project. But I was interested in the vite setup for my other projects, like when I'm doing just basic html integration with no CMS, but I still want to use sass, have my css preprocessed, using js module ect. I don't want a BIG setup, doesn't use tailwind, just the basics for building my assets and browser-sync 2 Link to comment Share on other sites More sharing options...
Recommended Posts