First Time Using WordPress Gutenberg Editor and 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:
-
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.
-
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.
-
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.
-
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:
-
Design Conception: Developing or reviewing the website design.
-
Tailwind Prototyping: Rapidly prototyping the design using Tailwind CSS outside of WordPress to leverage its speed and my familiarity.
-
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/