Tailpress Child Theme

[ktoombs-sm2dev]

Hi,

Could you advise on the steps needed to create a child theme that would be used to change the colors that Tailwind uses? I am able to change the color palette in the blocks via the child theme's theme.json file, but I am having trouble connecting the child theme's theme.json file to replace the colors that the Tailwind classes use (ex: text-primary is still outputting the parent theme.json color instead of the child theme.json color).

Thank you.

[ktoombs-sm2dev]

Hello Jeffrey,

I am circling back to see if you had any thoughts on this. Thanks in advance!

[EricBusch]

@sm2dev Not sure if this answer is still relevant but @jeffreyvr had this to say about Child Themes last year: #44 (comment)

[ktoombs-sm2dev]

@EricBusch Thanks for the link to that. We have created a robust parent theme with a lot of features and components using Tailpress as the starting point. We would like to use that parent theme for multiple projects and keep the parent theme intact while all customizations (colors, font families, etc.) are controlled through a child theme. I have not yet found a way to do this with Tailwind.

[jeffreyvr]

What you could do is:

1. Make a child theme directory with style.css and functions.php
2. Copy tailwind.config.js and make it look for the parent theme content as well

module.exports = {
    content: [
        '../tailpress/*.php',
        '../tailpress/**/*.php',
        '../tailpress/resources/css/*.css',
        '../tailpress/resources/js/*.js',
        '../tailpress/safelist.txt',
        './*.php',
        './**/*.php',
        './resources/css/*.css',
        './resources/js/*.js',
        './safelist.txt'
    ],

3. Copy webpack.mix.js, posts.config.js, theme.json and package.json

4. Dequeue the parent css and js (depending on your needs), enqueue the child css and js

function tailpress_child_enqueue_scripts()
{
    $theme = wp_get_theme();

    wp_dequeue_style('tailpress', get_template_directory_uri() . 'css/app.css');
    wp_dequeue_script('tailpress', get_template_directory_uri() . 'js/app.js');

    wp_enqueue_style('tailpress-child', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
    wp_enqueue_script('tailpress-child', tailpress_asset('js/app.js'), array(), $theme->get('Version'));
}

add_action('wp_enqueue_scripts', 'tailpress_enqueue_scripts');

6. Create resources/css/app.css and import the parent's app.css:

@import "../../../tailpress/resources/css/app.css";

Do the same for editor-style.css

@import "../../../tailpress/resources/css/editor-style.css";

And app.js

import '../../../tailpress/resources/js/app.js'

This would give you a child theme that inherits the Tailwind classes from the parent, as well the parent's javascript. It also allows you to set custom fonts, colors etc..

Drawbacks; there is some duplication since you are copying theme.json and tailwind.config.js

I haven't tested it thoroughly, but here is a quick demo: https://github.com/jeffreyvr/tailpress-child-theme-demo

[ktoombs-sm2dev]

@jeffreyvr Thank you! I look forward to giving this a try and seeing how it works.

[hallsarturo]

Thank you jeff, but styles are still broken, and if I run npm watch I get:

[jeffreyvr]

@hallsarturo Did you create the resources/css/app.css and resources/js/app.js files?

[hallsarturo]

I mist the js one (facepalm)

[hallsarturo]

This time I used your child demo, and as it also had broken styles, I was reading each file, and realised that in tailwind.conf.js theres a plugin tailpress. So I installed, and now its working :)

Thanks!!

[filip-van-hoeckel]

When using the example code the backend complains it cannot find the main theme. I am positive it is there. What else should I run after configuring the child theme?