Tailwind CSS for ProcessWire Developers

[Sergio]

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.

[bernhard]

  On 8/28/2019 at 9:20 PM, Sergio said:

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

Expand  

That should not be too hard ? 

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

[Sergio]

  On 8/29/2019 at 7:31 AM, bernhard said:

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

Expand  

Yes! And there's this Tailwind CSS IntelliSense VS Code extension that's excellent: https://github.com/bradlc/vscode-tailwindcss

[szabesz]

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

https://www.browserlondon.com/blog/2019/06/10/functional-css-perils/

Quote:
"...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."

[Jonathan Lahijani]

TailwindCSS 2.0 was just released: https://tailwindcss.com/

 

[Jonathan Lahijani]

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.

[elabx]

  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.

Expand  

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

[pwired]

Remember pocketgrid css ? Lately I learned to mix flexbox with pocketgrid and now it covers almost all of my layouts.

[Christophe]

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.

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

Edited November 19, 2020 by Christophe

[Mikie]

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.
 

[kongondo]

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 ?.

[eydun]

  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. 

Expand  

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/

[Krlos]

I am very interested in learning Tailwindcss, but I have no experience with the latest tools. How can I integrate Tailwindcss into my processwire projects and use postcss and purgecss to remove unused css.

 

[3fingers]

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:

pcss
├── 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:

package.json

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.)

tailwind.config.js

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:

postcss.config.js

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: [
    './*.php',
    './inc/*.php',
    './fields/*/*.php'
    // etc.
  ],
  whitelistPatterns: [
    // Pattern to exclude during extraction
    /^(fff-)/
  ],

...

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 */

css...

/* 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 ?

Run:

npm install

then:

npm run start

and finally:

npm run watch

 

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

[Jonathan Lahijani]

  On 11/28/2020 at 10: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/

Expand  

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.

[pwired]

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 ?

[eydun]

  On 11/30/2020 at 9:10 PM, Jonathan Lahijani said:

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.

Expand  

I agree. Headless UI looking promising.

[kongondo]

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 December 17, 2020 by kongondo

[Jonathan Lahijani]

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.

 

[kongondo]

  On 3/15/2021 at 6:01 PM, Jonathan Lahijani said:

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

Expand  

Great! I have a feeling Windi CSS might have been a wakeup call ?.

[froot]

@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?

[3fingers]

@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.

[Krlos]

  On 4/16/2021 at 5:09 PM, 3fingers said:

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

Expand  

Please!!, That would be great.

[3fingers]

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:

 

[wbmnfktr]

Awesome!

My sunday is saved with some new fun I never really got into.