These are additional notes for the WordPress twenty twenty four child theme that this site uses. The source is available on Github at: https://github.com/ev3rywh3re/jesse-james-block

At this point the scaffold has been built with NPM support for TailwindCSS as well as the included ReactJS component and dependencies. The completed configuration and installation will give us two basic build commands to create the components and supporting CSS:

# Compile ReactJS components:
npm run build
# Compile CSS
npm run build:css

This next addition is to support some presets and math functions for the Golden Mean. Here is a root link for the topic on Wikipedia. My focus is using the visual art standard ratio as the base ratio for my documents. There are some other ratios and actually this TailwindCSS plugin could open up exploring those models. I typically like testing structure flow starting at the document font, so these tools make that fun.

I am also focusing on this integration using a WordPress child theme (in this case Twenty Twenty Four).

The TailwindCSS plugin is on Github at: https://github.com/truefrontier/tailwindcss-golden-ratio

Installation is pretty easy using:

npm i -D tailwindcss-golden-ratio

Additional updates will be needed for the tailwind.config.js file:

plugins: [
    require('tailwindcss-golden-ratio'), 
  ],

There is documentation for classes, but what I found useful were the CSS variable presets that can be used in places like the child theme.json file like so:

		"spacing": {
			"blockGap": "1.5rem",
			"padding": {
				"top": "var(--wp--preset--spacing--40)",
				"right": "var(--golden-ratio-fixed-6)",
				"bottom": "var(--wp--preset--spacing--40)",
				"left": "var(--golden-ratio-fixed-6)"
			}
		},

My website is mostly for my creative work both personal and professional, so I do try to keep a sort of open canvas. My goal is to use the golden ratio presets to have less chaos for the the page structure based on typography.