Jump to content
Sergio

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

Share this post


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 🙂 

image.png.6980ff8a4384aad2fb7192640dddaae0.png

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

FcpanjQ.png

sqm0y89.png

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


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.

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


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.

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

Edited by Christophe
  • Thanks 1

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

 

Share this post


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:

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 🙂

  • Like 1

Share this post


Link to post
Share on other sites

  • Recently Browsing   2 members

  • Similar Content

    • 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! 
      Greg
    • 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.
    • By picarica
      so i just downloaded this template  and i uploaded it to my server made some .php changes so it would work and stuff but all the css-transitions or css-animations don't work. they just stop
      if you checked out the template all those buttons are smooth and really nice, bit when you check out my site all those animations are gone, why is that? is there some option i have to toggle? or is it normal? how do i fix it ?
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • By rafaoski
      This profile can be used as a simple business card or blog.
      The profile does not use any framework css structure, only styles based on CSS GRID and FLEX.
      To minimize page loading, I added lazy load for images ( Tupola Lazy Load ).
      With include functions like:
      MarkupRegions
      FunctionsAPI
      CAN DOWNLOAD FROM THIS LINK:
      https://github.com/rafaoski/site-grayscale-pw
      https://github.com/rafaoski/site-min-grayscale-pw
      Screenshot:

       
×
×
  • Create New...