Wordpress and Tailwindcss during development and production

[vanling]

I hope this is the right place to share this? (maybe move to show and tell?)
But just wanted to share the following code snippets that might be helpfull for others working with wordpress and tailwind.
The idea is a switch for development mode true/false that switches between tailwind cdn for development and tailwind cli for production.

For the switch I use ACF Options Page Admin and Advanced Custom Fields PRO 5. But you could change this into a hardcoded true/false value if you like.

In development

• Delete the generated styles.css
• Load a modified tailwind.config.js and require the tailwind.css in the header (the last bit could maybe be moved to functions.php)

When in production mode the first page hit will

• I use the tailwind CLI build from https://github.com/tailwindlabs/tailwindcss/releases for the OS I use, i've renamed and moved this binary to theme/custom-theme/tailwind/tailwindcss
• Also I run a (w)hacky loop function though all posts and pages and create a tailwind-content-classes.txt with all the classes that live in the content
• A styles.css will be generated and the existance of this file will make sure the tailwindcss binary and content loop will only run once

Pros:

• It's not the most perfect solution but this makes sure our developers can 'build' the whole site in wordpress and when done, generate a clean css once :) without up/downloading theme files
• no node/npm/terminal required

Cons:

• Server/Site should be able to use shell_exec
• Used 40mb in the theme for the tailwind binary
• Slow first page after disabling dev mode.

Will copy some of the file contents below. Keep in mind this all quick/dirty/ugly code but I hope someone smarter could use this idea and make a beautifull plugin for other wordpress users :D

theme/custom-theme/tailwind.config.js

let tailwind;
let modus;

if (typeof(window) === 'undefined') {
	tailwind = {};
	modus = "production";
} else {
	try {
		tailwind = window && window.tailwind || {};
		modus = "development";
	} catch(e) {}
}

tailwind.config = {
	content: [
		"../**/*.php",
        "../**/*.txt",
	],
	theme: {
		extend: {},
	},
};
if (modus === "production") {
	tailwind.config.plugins = [
		require("@tailwindcss/typography"),
		require("@tailwindcss/aspect-ratio"),
		require("@tailwindcss/forms"),
		require("@tailwindcss/line-clamp"),
	];
}

if (typeof module !== "undefined" && module.exports) {
	module.exports = tailwind.config;
}

theme/custom-theme/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {}

theme/custom-theme/your-theme-header.php

<?php 
    $dev_mode = get_field( 'dev', 'option' );
    if ( $dev_mode ) {
        echo '<style type="text/tailwindcss">';
            require('tailwind.css');
        echo '</style>';
    }

?>

theme/custom-theme/functions.php

<?php
if ( ! defined( 'COMPANY_VERSION' ) ) {
	// Replace the version number of the theme on each release.
	define( 'COMPANY_VERSION', '1.0.0' );
}
function tailwind_content_classes() {
    global $post;
    $html_output = '';
    $pages_content = new WP_Query([
        'post_type' 		=> [ 'any' ],
        'posts_per_page' 	=> -1
    ]);
    while ( $pages_content->have_posts() ) : $pages_content->the_post();
        $html_output .= get_the_content();
    endwhile;
    wp_reset_postdata();
    $filename = get_template_directory() . '/tailwind-content-classes.txt';
    $somecontent = $html_output;
    if (is_writable($filename)) {
        if (!$fp = fopen($filename, 'w+')) {
            exit;
        }
        if (fwrite($fp, $somecontent) === FALSE) {
            exit;
        }
        fclose($fp);
    }
}

function company_scripts() {
	$dev_mode 		= get_field( 'dev', 'option' );
	$development 	= $dev_mode;
	if($development) {
		wp_enqueue_script( 'company-style', 'https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp', array(), COMPANY_VERSION);
		wp_enqueue_script( 'company-tailwind', get_template_directory_uri().'/tailwind.config.js', array('company-style'), COMPANY_VERSION);
		if(file_exists(get_template_directory().'/style.css')) {
			unlink(get_template_directory().'/style.css');
		}
	} else {
		if(!file_exists(get_template_directory().'/style.css')) {
			tailwind_content_classes();
			shell_exec('cd '.get_template_directory().' && ./tailwind/tailwindcss -i tailwind.css -o style.css -m');
		}
		wp_enqueue_style( 'company-style', get_stylesheet_uri(), array(), COMPANY_VERSION );
   }

}
add_action( 'wp_enqueue_scripts', 'company_scripts' );

[vahidalvandi]

do you use this code in real site?

[suabahasa]

Thank you for providing such a thorough guide.

... but I hope someone smarter could use this idea and make a beautiful plugin for other WordPress users :D

I have built a plugin named WindPress that uses the upcoming Tailwind CSS v4.0.

We use a different approach for running Tailwind CSS. Instead of running it on the server, which requires additional server/environment setup, we run it entirely on the browser.

If you are interested in diving in and contributing, you can access the source code at https://github.com/wind-press/windpress

[krstivoja]

Hello. You can check Winden plugin for wordpress. It's perfect integration so you do not need to do all those steps.

Great thing is that we have build also files scanner for themes and plugins.
But on the top of that we save tailwind.config file where you are scaning files so if you are editing them with Visual studio you will have same autocomplete.

Feel free to check https://dplugins.com/downloads/winden/