Tailwind CSS integration added to ACF Engine v.1.50

Tailwind CSS integration added to ACF Engine v.1.50

In the upcoming release of ACF Engine v1.5.0 dropping this week (August 12, 2022) there is a very special feature added. Tailwind CSS is now baked into ACFG with a custom PHP-based CSS parser.

What this means is that you can now use Tailwind in WordPress without a NPM build process. Instead we have a PHP build process that runs as you add Tailwind classes into Gutenberg. This ensures only the classes you use are added to your output CSS stylesheet, keeping the site lean. In fact on many projects one of the best aspects of Tailwind is the capability to reduce your CSS size dramatically.

CSS Parsing in PHP, No NPM Build Required

Ever wondered how big Tailwind would be if you loaded it all at once? Well we found out that with no variations the entire basic Tailwind raw file was about 250,000 lines! Yikes. But wait, there is more. After realizing sure we’ve got all the basics… what we don’t have is hover styles… the lines of code doubled to about 500k. Then when we decided to add dark mode support, and also dark/hover mode support to go with it… now we reached 1-million lines. The file was about 20mb. Now for a practice project loading that raw file is actually fine, it won’t (usually) crash your browser or freeze your code editor… though we found when checking this 1-million line raw CSS file that the Atom editor was having trouble with it. Of course this just illustrates why CSS parsing is vital. Using NodeJS and NPM this is normally done through a “Post CSS” parsing approach, and a Tailwind config file at the root of your project will direct that parser where to find and parse files.

Baking Tailwind CSS Into Custom Themes

On a side-note, if you’re a developer looking to use Tailwind in WordPress, but your not planning to adopt ACF Engine… the way we practiced with Tailwind prior to building out the ACF Engine integration was to bake Tailwind into our custom themes. This is easy enough to do just following the Tailwind CLI (requires NodeJS installed) recommended process. If you go this route you’ll be able to do a development build by setting up the Tailwind parser to “watch for changes” in your theme. Presuming you’re adding classes directly into PHP template files, you’ll need to configure your Tailwind config file to watch PHP files.

Tailwind CSS Integration Support & Limitations

At this point ACF Engine’s Tailwind support only works via the Gutenberg editor where we strip class names out of the “Advanced Panel” found in all the core blocks. This will only work if the block does have a “Custom CSS Class” input, which most (maybe all) do at this point. Here is what you might be wondering, Tailwind of course has a “CSS reset” utility that resets a lot of common HTML elements to a reasonably “bare bones” state. What effect does this and other Tailwind classes have in the WordPress context, especially in Gutenberg? Well, one unfortunate thing we found in testing is that there are situations where the Gutenberg core blocks use more specific CSS in the editor, and as a result those styles override Tailwind styles. There are also cases where Gutenberg core blocks output inline CSS with generate ID’s, again that is going to override Tailwind class-based styles. As we continue testing we’re going to try to document which core blocks work seamlessly with Tailwind and which one’s have partial (editor-only) or full style overriding. We’re already exploring options for how to overcome this limitation. The most obviously work-around is just to avoid using core blocks, which a lot of you already are due to a range of style issues. In fact poorly though out CSS is in the list of top reasons why people are not loving Gutenberg, and we feel it’s up to us as a 3rd-party developer to try to provide blocks that leverage Gutenberg without the problems associated with the core blocks. Tailwind can help a lot in this area.

Potential Benefits of Adopting Tailwind CSS for WordPress

If you’ve read this far into this Tailwind integration announcement you probably already know Tailwind CSS and use it everyday, or you’ve run over to Tailwind official site and learnt about it and then returned. Nonetheless I think it’s worth including a bit of context for why Tailwind can be so helpful in a project from a WordPress specific context.

  1. Customizing Core Blocks with Tailwind CSS. Tailwind CSS can help us adapt existing Gutenberg blocks, both core blocks and any 3rd-party blocks that support custom class names. This means for example instead of having to make your own custom button block to achieve some styling not supported by the core block, or having to write custom CSS and load it in both the editor and front-end, instead you can just add a Tailwind class like “absolute” and “top-0” and “right-0” and bam, you’ve got an absolute positioned button.
  2. Building Out Custom Blocks Faster with Tailwind CSS. If you believe styling is faster and more consistent with Tailwind (and most who adopt it do believe this to be the case) then it stands to reason ACFG’s Tailwind integration will save you time on your custom block builds. Whether you’re using the no/low code approach of building ACF blocks in the ACF Engine Block Editor, or whether you’re extending the ACF Engine BlockType class and writing the block in code, you can now make a block render with it’s styling baked into the HTML instead of having to write an entirely separate class.

Next Major Integrations for ACF Engine

We have 2 more important integrations planned on the ACF Engine Development Roadmap set to be completed in September of this year. The first is Algolia, the popular SAAS search service. We’re adding this because of the relatively limited capabilities of WordPress core search. Currently we have a Search Block Type in the ACFG Core Block Suite, and it works as a facet filter/search in combination with other filters for taxonomy and meta filtering. And while this works fine for many use cases, we want to deliver a top-notch search option and make it as easy to implement as possible. Algolia works beautifully, and although it is a premium service it has a fairly generous free usage tier that site owners can use to get started.

After Algolia the next major integration planned for ACF Engine is ClickUp. We use ClickUp at ACF Engine and SaberWP to manage our internal as well as client development projects. From managing plugin development to site builds and even marketing campaigns, we love ClickUp and consider it one of the best pieces of software ever made in any category. We’ll be starting with a modest integration that cherry picks a few key types of data and enables one-way sync inbound to WordPress from ClickUp. More details will follow as the plan for ClickUp integration are finalized, so stay tuned for more!