As sappy as the title sounds, I am in love with Tailwind CSS. If you’re not familiar, it is a utility-first CSS framework designed to be as unopinionated as possible. This means you slap some utility classes onto your element and it is styled without writing a single line of CSS.

I was introduced to it through a friend whose agency,  BeGreat, has started using Tailwind extensively in their builds. I’m a WordPress-focused developer and so are they and we’ve figured out a mostly painless way to work with Tailwind in developing fast WordPress themes fairly quickly.

The biggest issue with Tailwind, a blessing and a curse as it saves space, is that Tailwind is meant to be used with PurgeCSS, which scans your files and purges any unused classes. Obviously, with dynamic content in WordPress, there’s not really a way to know what kind of classes the end-user may need when writing.

I would imagine for more news or blog style projects, Tailwind may not be a perfect choice, but I recently finished a site for a beauty and skincare brand, Kuza Products, where, with the power of ACF, I was able to limit the client’s input to mostly pre-defined ACF fields, giving me in the PHP files control of what classes were assigned to various elements. With this approach, some careful planning, and ACF, you’re able to focus and limit the dynamic content to live purely within components you’ve defined in your PHP theme files.

There were some extra steps, I found a list of common WordPress classes and was able to whitelist them from being purged, but my main concern was the speed of development on this project. I had a very limited timeframe to craft this site, only two weeks, and so I had to come up with a fast solution.

I love browser-sync and with a little setup, was able to get it working with WordPress and rapidly create templates without having to tab between a stylesheet and the theme’s PHP files. This let me essentially have this process:

The result was a well built site for a national brand, high google page speed scores, and a happy client. My next projects will also almost certainly use tailwind and I’m excited to evolve my workflow with it. Recently Tailwind added a JIT compiler and I’m already looking forward to trying to use that in my next build.

As of now, if you’d like to try my setup, I have switched to using Laravel Mix to watch my files and build the tailwind script and I have a starter WordPress template on my GitHub which can be found here.

Thanks for bearing with my cheesy love-letter to Tailwind. I promise I have no affiliation with Tailwind, but I really do just love using it.

While learning WordPress theme development, one of my biggest frustrations was setting up development environments to test different features or begin a new project.

Often times, I simply wanted to fiddle around with various features or test a layout, but setting up a local environment was tricky at the beginning. I wasn’t hip yet to virtual environments such as Vagrant and to speak honestly, I’m still not. It’s on my to-do list.

One of the great things about OSX is that it ships with PHP out of the box making spinning up a PHP server a breeze. However, getting a database server up and running was a challenge in the beginning while I was simply trying to get the basics of web development down.

After learning about the portability of SQLite, I searched for a simple solution to set it as the default database in WordPress.  And, to my rescue, there was already a plug-in enabling this exact thing already floating out there.

Here is the SQLite Integration by Kojima Toshiyasu.

Although the plug-in has not been updated for some time, I’ve encountered no problems with it so far, though that does not guarantee it will remain bug-free.

I went ahead and did the work of downloading and integrating the plugin into a base install of WordPress. The instructions are not difficult if you’d like to do it yourself. I simply followed this guide here.

But to make things simple you are free to clone my repo here and get started quickly and easily in a matter of seconds.

 

Clone the repository:

git clone http://github.com/joemalott/sqlitepress your-project-name

Then simply move into your project directory

cd your-project-name

Then fire up PHP server. On OSX this is

php -S localhost:8000

Open a browser at http://localhost:8000 and after inputting admin credentials you are immediately in a new instance of WordPress. With the power of SQLite you now have a highly portable instance to begin tinkering with.

Please do not use this in large-scale production environments. Even small-scale projects may encounter unforeseen errors due to the use of SQLite.

This is mainly a great tool to quickly begin theme development. Coupled with the fantastic FakerPress plugin to generate some fake data, you can pretty much have a blank canvas ready to begin theming within 5 minutes.

Happy Theming. 🙂