Wordpress child theme with Tailwind

[federicocappellotto97]

Hello everybody, i've a little problem..
I've a parent theme with tailwind installed on a wordpress site, css is purged and everything is working fine..
I need a child theme with Tailwind as well, but i've some problem because some classes are overriding..
For example if i have a

on parent templates, the class lg:w-1/2 is only on parent theme's css, but since child theme's css is imported after the parent's, the class w-full override the class lg:w-1/2
And the div has width: 100% even on lg desktop

Sorry for my bad english, i hope you can understand :)

[JNavith]

Check out the important configuration option to make your utility CSS take priority over others:
https://tailwindcss.com/docs/configuration#important

[adampatterson]

I found this while looking for a way to handle Tailwind in a parent child theme.

Some of the issues you're experiencing might be solved with safelist.

But after reading your question I'm going to try something like this:

Your Parent theme is probably already working fine. So the goal is to have a child theme that compiles Tailwind correctly without loosing class names correct?

I think if you were to update the child themes tailwind.config.js file under content and add your parent theme paths, and your child themes paths.

module.exports = {
    content: [
        './**/*.php',
        './assets/js/**/*.js',
        '../**/*.php',
        '../theme-name/assets/js/**/*.js',
    ],
}

You'd be loading all of your CSS from the child theme which should be fine, If you've setup any tailwind conf properties that you'd want in your child theme then I think you need to move that data out and into it's own module or something.

colours.js

module.exports = {
    'primary': '#15D234',
    'secondary': '#FF3F33',
}

tailwind.config.js

const customColors = require("../theme-name/config/tailwind/colors");

module.exports = {
   theme: {
        extend: {
         colors: {
                ...customColors,
              // whatever you need for the child theme.
       }
   }
}