Tailwind Dark and Light Theme implementation error

[24Degrees]

Good day to you all,

I would like to report the following error:

Errormessage: "Uncaught TypeError: Cannot read properties of null (reading 'classList')"

When: Occurs when trying to follow the dark and light theme implementation of Tailwind CSS using this guide:
https://tailwindcss.com/docs/dark-mode
Or the Flowbite guide:
https://flowbite.com/docs/customize/dark-mode/

Cause: JS is executed before the HTML has been build.

Solution: add the parameter true at the end of enqueuing the JS-files in functions.php so all JS-files load in the HTML footer.

Example with error:

wp_enqueue_script( 'tailpress', levatus_asset( 'js/app.js' ), array(), $theme->get( 'Version' ) );
wp_enqueue_script( 'flowbite', levatus_asset( 'node_modules/flowbite/dist/flowbite.js' ), array(), $theme->get( 'Version' ) );

Example solved, adding true for loading JS in footer:

wp_enqueue_script( 'tailpress', levatus_asset( 'js/app.js' ), array(), $theme->get( 'Version' ), true);
wp_enqueue_script( 'flowbite', levatus_asset( 'node_modules/flowbite/dist/flowbite.js' ), array(), $theme->get( 'Version' ), true);

Thanks for the outstanding job Jeffrey,

kind regards,

Michael
24degrees

[jeffreyvr]

Hi @24Degrees,

In this case the script was probably executed before the dom is finished loading, as you already found out.

One way to fix this, is to wrap the JS that needs to be executed after the page has finished loaded inside an event listener. So like:

window.addEventListener('load', function () {
   // the code
})

You could add this in app.js.

One other thing I noticed, is that you are enqueing the flowbite.js from the node_modules folder. The node_module folder is often a folder that only exists locally.

You could also import the Flowbite.js in your app.js file. I haven't worked with Flowbite yet, but this should work:

import 'flowbite';

[24Degrees]

Thanks for the tip Jeffrey.

Just a little question: I should be able to add Flowbite to Tailpress using npm install flowbite? Because if I dont enqueue the flowbite as a CSS file, it doesn't work.

Anyway I love this Tailpress thing. Going to use it for everything I have to build from now on.

[jeffreyvr]

@24Degrees Thanks! To add Flowbite to TailPress, do the following:

From the theme folder, run npm install flowbite

Next, in tailwind.config.js add the flowbite plugin:

plugins: [
    tailpress.tailwind,
    require('flowbite/plugin')
]

Add the following to the content section of the config:

content: [
    // Keep the TailPress defaults here
    "./node_modules/flowbite/**/*.js"
],

Next, in resources/app.js add the following:

import 'flowbite';

You should now be able to use flowbite components in your theme.

[24Degrees]

Thank you so much Jeffrey! Op vr 10 mrt 2023 om 12:21 schreef Jeffrey van Rossum < ***@***.***>:

…

@24Degrees <https://github.com/24Degrees> Thanks! To add Flowbite to TailPress, do the following: From the theme folder, run npm install flowbite Next, in tailwind.config.js add the following the flowbite plugin: plugins: [ tailpress.tailwind, require('flowbite/plugin')] Add the following to the content section of the config: content: [ // Keep the TailPress defaults here "./node_modules/flowbite/**/*.js"], Next, in resources/app.js add the following: import 'flowbite'; You should now be able to use flowbite components in your theme. — Reply to this email directly, view it on GitHub <#154 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEECEBRJRQZTY43I3MQ5BHDW3MFE3ANCNFSM6AAAAAAR2XXYGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Michaël Martens Captain of the ship +32 468 16 08 72 ***@***.*** www.24degrees.be

[24Degrees]

Mmm, I followed your advice and checked everything twice. But it is not working:
Could not find a declaration file for module 'flowbite/plugin'. 'c:/Users/24/Documents/Development/24degrees/wp-content/themes/levatus/node_modules/flowbite/plugin.js' implicitly has an 'any' type.
If the 'flowbite' package actually exposes this module, try adding a new declaration (.d.ts) file containing declare module 'flowbite/plugin';ts(7016)

I will try to add a declaration file but I wanted to report this just in case other people run into it.

[jeffreyvr]

Maybe Windows specific issue. I've only tested this on macOS.

[24Degrees]

I'm sorry for this late reply @jeffreyvr but it was a mistake from my part. So not a bug.