Jump to content

Tailwind CSS for ProcessWire Developers

Recommended Posts

I couldn't say it better than @LostKobrakai did. Thank you!

I can only suggest that anyone interested should try Tailwind on a small project to see how it's for real, it's difficult to see its benefits without trying. After you memorize the classes your speed creating layouts will increase a lot.

  • Like 2
Link to post
Share on other sites
10 hours ago, Sergio said:

After you memorize the classes your speed creating layouts will increase a lot.

That should not be too hard 🙂 


Actually code completion is also a benefit compared to plain css.



  • Like 2
Link to post
Share on other sites
  • 4 weeks later...

article: The perils of functional CSS
(sometimes referred to as atomic CSS)


"...if you don’t have a dedicated front-end team to handle this end of things, I can see how functional CSS would be useful. I don’t think it’s a coincidence that back-end developers have written most functional CSS libraries."

  • Like 2
Link to post
Share on other sites
  • 1 year later...

My journey with CSS frameworks has been: Bootstrap v2 → Zurb Foundation → Bootstrap 3 → UIkit 2 → Uikit 3.  This is over the course of 9 years, with plain CSS for several years before that.

All of the frameworks I mentioned come with pre-define components along with the JavaScript to do the usual things like accordions, tabs, modals, etc.  I really fell in love with UIkit 3 because it goes very deep with JS components, giving you things like filters, lazy loading and slideshow.  With Bootstrap, you have to use 3rd party libraries to get the same level of functionality, which in the past has lead to breaking packages for whatever reason, compatibility issues and a lack of cohesiveness.  Maybe my workflow these days would alleviate some of those issues, but the fact remains UIkit solves like 95% of my use cases.

I completely see the appeal of Tailwind having done CSS for a long time, but the lack of an official set of JS components is holding me back from giving it a try.  I'm still waiting to see how UIkit 4 turns out and see how much further they go with utilities.  Or I just may sit down and write a set of UIkit classes using Tailwind @apply that uikit.js expects so components looks correct (has anyone done this?).  But, that feels a little hacky.

  • Like 4
Link to post
Share on other sites
1 hour ago, Jonathan Lahijani said:

I completely see the appeal of Tailwind having done CSS for a long time, but the lack of an official set of JS components is holding me back from giving it a try.

I'm in this exact same position, UIkit solves A LOT of the "interactivity" requirements coming from clients/agencies.

Link to post
Share on other sites

I'm using Uikit 3 these days (in part because Ryan had created a profile with Uikit that served as a basis), but my aim is to use CSS GRID,  and FLEXBOX if it is really needed, in the nearest (possible) future.

(With Uikit, for instance, I would have preferred the main menu code to be unique, instead of one for desktop and another one for mobile, even if sometimes it has advantages.)

I would like to stay away, as much as possible, from classitis, divitis, cssitis (too many rules not used and/or overriden *). * And the same if possible with jquery (if really needed) and javascript.

NB: But I can imagine Tailwind's interest for some specific projects...

Edited by Christophe
  • Thanks 1
Link to post
Share on other sites

I've tried using Tailwind but the verbosity of the classnames was a killer for me. Then I tried using tachyons which I much preferred but didn't like the lack of configurability.

Tachyons (which came LONG before Tailwind) never pretended to be a holy solution for managing css, it was clearly defined as a quick way to get ideas onto the screen, with the view that you would slowly strip out all the utilities into regular css as your design system evolved. On the flip side, what tailwind did right for me was the theming system, however as a diehard stylus user I found it frustrating I couldn't use the theme variables in my custom stylesheets.

Based on the above, I wrote my own utility functions in stylus that could 1:1 replicate tachyons or tailwind (or a mix of the two / whatever you wanted), with a theme defined in stylus hashes that could then be used throughout my custom stylesheets, plus mixins that replicate a lot of the utilities, eg px(2). Even still, I found that generally I would generally only end up using a few of the utilities like spacing, text-align, display etc.

These days I follow a methodology mainly based on https://rscss.io and https://piccalil.li/cube-css/, with some ideas from https://github.com/ahmadajmi/awesome-itcss thrown in. I have a theme that defines defaults, still use some utility classes whilst developing, but basically break things up into:

- theme (this is very simple similar to https://github.com/hankchizljaw/gorko, generally it just has: colours, breakpoints, media queries, fonts, spacing scale )
- mixins (I use some flex-box grid, media query and spacing mixins and that is about it)
- base (resets, classless base styles etc)
- elements (semi utilities for type, links, buttons, input fields, sort of like bootstrap)
- components (pretty much everything is a component following rscss conventions)
- utilities (rather than a separate utility stylesheet I now output the ones I want to use at the end of stylesheet and slowly strip them out)

Currently this is working really well for me although I am sure it will continue to evolve. One thing I also do is try never to change classnames with javascript, but instead use data-attributes. This way you can very quickly parse what javascript is doing in your html.

  • Like 2
Link to post
Share on other sites

Hey folks, I love the discussion, but please, we are getting OT 😁. This thread is for Tailwind CSS. Please open a separate topic (if one doesn't already exist) if you wish to discuss other frameworks. Thanks 😉.

  • Like 1
Link to post
Share on other sites
  • 2 weeks later...
On 11/18/2020 at 8:30 PM, Jonathan Lahijani said:

I completely see the appeal of Tailwind having done CSS for a long time, but the lack of an official set of JS components is holding me back from giving it a try. 

I do not expect that Tailwind will ever have JS components included. Instead it integrates easily with other JS-frameworks such as Vue or Alpine.JS. You can find many examples of Tailwind with Alpine here: https://www.alpinetoolbox.com/

  • Like 1
Link to post
Share on other sites

For anyone who is interested in integrating tailwind inside a processwire project here is a little walktrough based on my workflow.
This little guide is based on Tailwind 1.9.6 (latest before 2.0 release) because some PostCSS library I use are still not compatible with 2.0 version (not a big deal, really).

You can find the necessary files here.

- Place package.json, tailwind.config.js, postcss.config.js inside your template folder.
- Create a "pcss" folder, and make a structure like this:

├── inc
│   ├── colors.pcss
│   ├── fonts.pcss
│   ├── media_queries
│   │   ├── lg.pcss
│   │   ├── md.pcss
│   │   ├── sm.pcss
│   │   └── xl.pcss
│   └── sitewide.pcss
└── kickstart.pcss

Now you got everything to get started, let's have a look at the files:


Inside "package.json" you have different dependencies I've installed to mimick my "old" scss workflow (importing, nesting, etc..), the important part however is the script section:

"start": "npx tailwindcss build pcss/kickstart.pcss -o css/dist.css",
"watch": "npx postcss pcss/kickstart.pcss -o css/dist.css --watch",
"build": "cross-env NODE_ENV=production npx postcss pcss/kickstart.pcss -o css/dist.css"

"start" is the bootstrap script you have to run at first, to let node compile tailwind as a whole. Do it at the beginning of the project or everytime you make some changes to "tailwind.config.js"
Change the name of your pcss files accordingly (I've used pcss as an extension, but css would work perfectly fine)

"watch" is the next script you have to run in order to have live reload of your stylesheets.

"build" is the script you have to invoke once you are ready to deploy to production (you need to specify your purge rules inside postcss.config.js, keep reading.)


Here you can specify your tailwind configurations, read the docs here.
One thing to notice inside mine is that I've set

purge: false

because I prefer to configure the purge part inside a dedicated file, which is:


This file is responsible to handle postcss options, and purge is one of them.
The paths you declare inside the content array are the ones whom will be scanned and purged eventually. Mine could be different than yours, so pay attention.
The whitelistPattern array is useful when you want to exclude some classes from the purge phase, below I'm excluding the ones whom starts with "fff-".


content: [
    // etc.
  whitelistPatterns: [
    // Pattern to exclude during extraction


The other settings are pretty explanatory (cssnano is used in production for minification).

As a final note you'll notice that every pcss file I use starts (and ends) with:

/* purgecss start ignore */


/* purgecss end ignore */

Those tell purgecss to ignore completely the file, since I know I want to retain every rule/class I write in there.

If you got everything setup correctly you can start having fun 🙂


npm install


npm run start

and finally:

npm run watch


Hope this little "guide" could enlighten in using Tailwind 🙂

  • Like 10
Link to post
Share on other sites
On 11/28/2020 at 2:18 PM, eydun said:

I do not expect that Tailwind will ever have JS components included. Instead it integrates easily with other JS-frameworks such as Vue or Alpine.JS. You can find many examples of Tailwind with Alpine here: https://www.alpinetoolbox.com/

Indeed.  Alpine looks interesting and I'm considering rewriting the cart and checkout portion of my ecommerce site with it instead of Vue one day.

I'm familiar with alpinetoolbox.com, and although the examples there look good, I prefer to have components that are more "official" and battle tested especially when using multiple components together.  For example, if there were eventually a project that had ready to go components from a single source that covers most of UIkit's components, I'd strongly consider it.  I believe there are some projects in the works for that, but nothing totally comprehensive yet.

Link to post
Share on other sites

Seeing all those frameworks popup one after the other - sure they all look interesting but are they really worth it ? Tailwind ?  .... Alpine over Vue ..... ? Jquery or plane javascript / css / php  do the job in 95% of all my cases. Do your website projects really need the new kid on the block ?

Link to post
Share on other sites
  • 3 weeks later...

Well, hello somebody! Look at what I've stumbled upon 😀.

Tailwind Starter Kit 

A beautiful extension for TailwindCSS.

Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular.

Yes and vanilla JS as well! (currently, 16 dynamic components.).

License: MIT

GitHub: https://github.com/creativetimofficial/tailwind-starter-kit

Site + Demos: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/

A tutorial on YouTube.

I haven't dug in deep yet (e.g. purge/tree shaking, etc). 

@Jonathan Lahijani. What do you think? 😄 


Edited by kongondo
  • Like 7
Link to post
Share on other sites
  • 2 months later...

JIT for Tailwind was just announced.  It's looks really great.

I'm still on the sidelines with Tailwind, but I do see myself using it in the near future.  @kongondo when HeadlessUI has components in Alpine that are fully fleshed out, that's when I think I'll make the switch.  While the Creative Tim components look good, I'd rather wait for something that's from the Tailwind creators and more comprehensive.


  • Like 5
Link to post
Share on other sites
  • 5 weeks later...

@3fingers why is this so complicated? I thought an npm would do most of this work for me. I looked at some tailwind css tutorial (unrelated to pw), looked quite simple but I didn't know which folder to install tailwind into in my pw installation using terminal, so I came here. All of a sudden: install this, download that, run this code, then this, purge css, post css - super complicated!

Why can't it be as simple as uikit?

  • Like 1
Link to post
Share on other sites

@fruid I agree with you that at first it looks complicated, mainly because it need a compilation step which has to be handled in some way.
Nowadays is quite common to rely on tools like webpack, rollup, parcel, vite, etc.. to handle some activities like compilation, minification, bundling, etc. Postcss is mainly just one of them, but specifically intended to work with with css. Once you grasp the few key steps to install it and how to purge your css efficiently I guarantee you will see the benefits at your disposal (mainly speed of layout blocking and very low css file sizes).
If someone it's interested I can make a video where I can explain all the install steps in further details.

  • Like 7
Link to post
Share on other sites
1 hour ago, 3fingers said:

If someone it's interested I can make a video where I can explain all the install steps in further details.

Please!!, That would be great.

Link to post
Share on other sites

I've just recoded a brief video where I've tried to explain how to install tailwind inside Processwire ( really badly spoken 😆 , so be kind...)

Moreover I've updated the gist here to reflect the changes I've made since the last time I've written the guide above.

There you have it:


  • Like 3
  • Thanks 2
Link to post
Share on other sites
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Zendex
      I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.
      <!doctype html>
      <meta charset="UTF-8">
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="preconnect" href="https://fonts.gstatic.com"> 
      <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
          <div id="nav_bar">
              <div id="Zendex">ZENDEX</div>
          <a href="contact.html"><li>CONTACT</li></a>
          <a href="films.html"><li>FILMS</li></a>
          <a href="about.html"><li>ABOUT</li></a>
          <a href="home.html"><li>HOME</li></a>
          <div class="main"></div>
      @charset "UTF-8";
      /* CSS Document */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section {
          display: block;
      body {
          line-height: 1;
          background-color: #6A6969;
      ol, ul {
          list-style: none;
      blockquote, q {
          quotes: none;
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      table {
          border-collapse: collapse;
          border-spacing: 0;
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100vw;
          height: 125px;
          background-color: #484848;
          border: solid 1px black;
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: right;
          margin: 45px 50px 0px 0px;
          height: 125px;
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: left;
          margin: 45px 0px 0px 100px;
          color: azure;
          margin: 0px 50px 0px 0px;
          color: azure;
          height: 125px;
          color: white;
          height: 125px;
          background-color: #6A6969;
          color: white;

    • By milo695
      I've added a class in ProcessPageEditLink but when I call it from Editor (attributes > class) nothing happens.
      Also, I've created the class in my custom.css, is there any other css file this class needs to be in?
    • By wwwouter
      Some context: I want to use PHP variables in my CSS (more info below) and found a solution on CSS-tricks that looks fairly elegant and somewhat solid to me. It's pretty simple, I created a file style.css.php inside the site/templates/ directory and load that in my page head. In style.css.php is the following:
      <?php header("Content-type: text/css; charset: UTF-8"); header("Charset:utf-8"); if ($homepage->hero_image) { echo <<<CSS .hero { background: url($homepage->hero_image->url) no-repeat; } CSS; } ?> Because of the following RewriteCond (line 373) in the htaccess file the server sends a 403 error back when the file is requested:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))($|/) [NC,OR] (My htaccess file is @version 3.0 and @htaccessVersion 301)
      This is how I thought I could fix that (based on these answers on stack overflow) but it does not work:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/((?!style\.css).)*\.(php|html?|tpl|inc))($|/) [NC,OR] I tested the rule with htacess tester and htaccess check and both worked for me, but on my site I still get a 403 instead of the file.
      I'm working on localhost, using MAMP (not sure if that's relevant).
      A bit more about what I want to do achieve specifically:
      I want to use an image as a background-image for an element, not place it as an image. This image is provided by the user via a field and can therefore change.
      I know I can achieve this like this:
      echo "<section class='hero' style='background-image: url($page->hero_image->url)'></section>"; But I would prefer a method other than inlining because of scalability and cleanliness. (I admit the extra link in the page head is not ideal either)
      P.s. this is my first post here, I hope it's submitted in the right forum and my explanation is clear.
    • By Greg Lumley
      Hi! In busy learning to know PW better I'm looking at existing code.
      I have Bitpoets Editorial Responsive Blog as example. While looking through the code I've just found this line in the blog-head.php 
      <link rel="stylesheet" href="<?= $config->urls->templates ?>assets/css/main.css?ts=<?= time() ?>" /> I hope it's not a stupid question but I've never seen this before...
      main.css?ts=<?= time() ?> I notice the main template is empty but of course renders on the front end.
      Using a timestamp really has me totally confused. Can someone explain it to me please. 
      Thank you! 
    • By hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
  • Create New...