First Time Using WordPress Gutenberg Editor and Tailwind CSS

Tags: PHP, WordPress, GutenBerg, Tailwind CSS

Context or Problem

I appreciate the “WordPress Way” of “no code first” exemplified by the Gutenberg Full Site Editor (FSE). My initial ideal workflow was to leverage a popular base theme (like Spectra One) and customize it entirely without code to match design guidelines and integrate copywriting, adding plugins only as necessary.

However, as a fan and user of Tailwind CSS known for its rapid development capabilities, I had a strong desire to integrate its utility-first approach. The core problem became: How can I achieve the development speed and styling control of Tailwind CSS within the no-code-friendly, editor-centric environment of WordPress Gutenberg FSE, without resorting to complex custom theme development from scratch?

Experiment

My initial experiment was to directly integrate Tailwind CSS with a standard FSE workflow. This involved:

  1. Attempting to “force” Tailwind CSS into the FSE ecosystem, hoping for a seamless integration where I could enjoy its benefits while still allowing for easy, no-code editing in the Gutenberg interface.

  2. Exploring the feasibility of building custom block themes from scratch that are FSE-ready, with an underlying Tailwind CSS foundation. (Though I had a static Astro JS version, the challenge was making it WordPress-editable without code).

Outcome

The experiment largely resulted in a dead end and significant frustration.

  1. Directly integrating Tailwind CSS with the existing Gutenberg FSE framework proved incredibly difficult and time-consuming. Gutenberg operates as its own self-contained block-based ecosystem, making it challenging to impose external CSS frameworks in a way that doesn’t conflict or break its intended “no code” editing experience for end-users.

  2. The idea of developing a custom FSE-ready block theme from scratch to accommodate Tailwind CSS felt like an overwhelming undertaking for a beginner. It seemed like it would consume excessive time that could be better spent on other learning and portfolio-building activities.

My current workflow has pivoted to:

  1. Design Conception: Developing or reviewing the website design.

  2. Tailwind Prototyping: Rapidly prototyping the design using Tailwind CSS outside of WordPress to leverage its speed and my familiarity.

  3. WordPress Rebuild: Rebuilding the prototyped design within WordPress, primarily using its built-in no-code capabilities (like Gutenberg blocks or potentially Elementor).

This new workflow provides the best of both worlds for my current skill level: the speed of Tailwind for ideation/prototyping, and the no-code ease of WordPress for final deployment and client editing.

Possible Next Steps

WindPress Plugin

I found a plugin named WindPress that claims to integrate Tailwind CSS with WordPress themes. I plan to experiment with it to see if it can simplify the integration process and allow me to use Tailwind CSS effectively within the Gutenberg FSE environment.

References

Gutenberg FSE - https://wordpress.org/gutenberg/

Elementor - https://elementor.com/

Spectra One - https://wordpress.org/themes/spectra-one/

Tailwind CSS - https://tailwindcss.com/