mishterk / wp-tailwindcss-theme-boilerplate Goto Github PK

Hello, I don't know if this is the place to ask questions. I really enjoy your solution to wordpress theme development. I'm using it for a project, and I had this question on how to make it work. I run npm run prod and it seems worked. Then send the files with FTP (ignoring node-moduls, etc) . Activate the theme and worked, unless css is not loaded. I add it mannually to the header and then work, but I'm pretty sure I'm doing something wrong.

Could it be different PHP versions?

My local development is made with varying vagrant vagrants and then use everything as you wrote it on the README file.

Again, thanks for your work

The file assets/scss/partials/_base.scss contains this:

html {
  @apply antialiased;
  font-size: 15px;
  text-rendering: optimizeLegibility;

  @screen md {
    font-size: 18px;
  }
}

When I'm using this fine theme I'm removing this because it causes some unwanted and maybe unexpected issues with Tailwind and I just wanted to shine some light on it for others to see.

Tailwind uses the rem unit extensively and that means that all the spacing everywhere are affected by changes to font-size on html, since rem is by definition equal to the font-size on the root element. By default most browsers are using 16px as the base font-size if nothing else is set. If you look at the Default spacing scale in the Tailwind docs it assumes that 1 rem = 16px.

So a change to the base font-size like this will make every type of spacing smaller on mobile (because of font-size: 15px; and larger on medium and up (because of font-size: 18px;). That makes it much harder to design with pixels in mind, in my experience, especially when it varies with the media query.

A completely different issue in this CSS is the use of antialiased which according to some is not recommended any more.

How to tell Purge CSS to ignore things
The easiest way is to delineate your CSS with comments as per the example below. See whitelisting for more options.

when i run "npm run dev" or "npm run webpack" as you made in the video it game me the belwo error

C:\laragon\www\active\wp-content\themes\wsa>npm run dev

[email protected] dev C:\laragon\www\active\wp-content\themes\wsa
cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

[webpack-cli] Error: Unknown option '--hide-modules'
[webpack-cli] Run 'webpack --help' to see available commands and options
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] dev: cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\amahe\AppData\Roaming\npm-cache_logs\2021-07-07T11_15_31_530Z-debug.log

and the log is

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\laragon\bin\nodejs\node-v14\node.exe',
1 verbose cli 'C:\laragon\bin\nodejs\node-v14\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]predev: [email protected]
6 info lifecycle [email protected]dev: [email protected]
7 verbose lifecycle [email protected]dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]dev: PATH: C:\laragon\bin\nodejs\node-v14\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\laragon\www\active\wp-content\themes\wsa\node_modules.bin;C:\Program Files (x86)\Common Files\Intel\Shared Libraries\redist\intel64\compiler;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Windows\System32\OpenSSH;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\laragon\bin\php\php-7.4.19-Win32-vc15-x64;C:\ProgramData\ComposerSetup\bin;C:\laragon\bin;C:\laragon\bin\apache\httpd-2.4.47-win64-VS16\bin;C:\laragon\bin\composer;C:\laragon\bin\git\bin;C:\laragon\bin\git\cmd;C:\laragon\bin\git\mingw64\bin;C:\laragon\bin\git\usr\bin;C:\laragon\bin\laragon\utils;C:\laragon\bin\mysql\mysql-5.7.33-winx64\bin;C:\laragon\bin\nginx\nginx-1.19.10;C:\laragon\bin\ngrok;C:\laragon\bin\nodejs\node-v14;C:\laragon\bin\notepad++;C:\laragon\bin\php\php-7.4.19-Win32-vc15-x64;C:\laragon\bin\redis\redis-x64-3.2.100;C:\laragon\bin\telnet;C:\laragon\usr\bin;C:\Users\amahe\AppData\Local\Yarn\config\global\node_modules.bin;C:\Users\amahe\AppData\Roaming\Composer\vendor\bin;C:\Users\amahe\AppData\Roaming\npm;C:\Users\amahe\AppData\Local\Microsoft\WindowsApps;C:\Users\amahe\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\JetBrains\PhpStorm 2021.1.4\bin;
9 verbose lifecycle [email protected]dev: CWD: C:\laragon\www\active\wp-content\themes\wsa
10 silly lifecycle [email protected]dev: Args: [
10 silly lifecycle '/d /s /c',
10 silly lifecycle 'cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'
10 silly lifecycle ]
11 silly lifecycle [email protected]dev: Returned: code: 2 signal: null
12 info lifecycle [email protected]dev: Failed to exec dev script
13 verbose stack Error: [email protected] dev: cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
13 verbose stack Exit status 2
13 verbose stack at EventEmitter. (C:\laragon\bin\nodejs\node-v14\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess. (C:\laragon\bin\nodejs\node-v14\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1048:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\laragon\www\active\wp-content\themes\wsa
16 verbose Windows_NT 10.0.19042
17 verbose argv "C:\laragon\bin\nodejs\node-v14\node.exe" "C:\laragon\bin\nodejs\node-v14\node_modules\npm\bin\npm-cli.js" "run" "dev"
18 verbose node v14.16.1
19 verbose npm v6.14.12
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] dev: cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
22 error Exit status 2
23 error Failed at the [email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]

Hello, I am trying to create a child theme. I have only the style.css file in my child theme folder and I am getting the following error from the parent theme (when I activate the child theme.) I have to add the functions.php in the child theme as well, later.

Warning: require(/themes/Child-Theme/app/AutoLoader.php): failed to open stream: No such file or directory in /wp-content/themes/Parent-Theme/functions.php on line 17
And my functions.php is similar to the original one here.

Can you please comment on this issue as what should go inside the functions.php of child theme.
Any help or guidance will be much appreciated.

Cheers.

"Clone into an empty theme directory" is a little bit confusing. Does that mean that no other themes should be present at this level? If I'm doing local development do I create a subdirectory here?
~/Local Sites/safer-or-toxic/app/public/wp-content/themes

Or maybe I just run git clone in that directory (though it isn't empty)

For hours I'm trying to figure out what prevents BrowserSync from injecting CSS changes into the browser. I've got a DDEV setup with Wordpress running on https://wordpress.ddev.site/. I changed the proxy in local.json to the host URL and ran npm run dev. When opening localhost:3000 I see BrowserSync is connect and injecting HTML changes, for example when I change one of the CSS classes (bg-indigo) in templates/partials/example.php to bg-indigo-200.

I expected the CSS in build/css/app.css to change too, as the original file contains .bg-indigo-700 which should now be .bg-indigo-200.

Should the npm command also generate the needed CSS before injecting it into the browser?

Steps I took to try to solve the issue

• Adding a host parameter to the BrowserSync config in webpack.mix.js
• Exposing port 3000 in DDEV docker compose yaml
• Running the npm run dev command from within the container
• Delete the build/css/app.css file after running npm run dev. No file was generated when editing a HTML CSS class.

[EDIT]

I figured this has something to do with de mode: jit parameter in tailwind.js. When disabling the Sass is generated and reloading the page in the browser actually displays the correct result, although injecting the CSS does still not seem to work properly.

added 1315 packages, and audited 1382 packages in 27s

19 vulnerabilities (6 low, 4 moderate, 9 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

After running npm audit fix, I got:

9 vulnerabilities (6 low, 3 high)

I have not run this project for some time but recently came up against this error:
Just wondering if you/anyone had see this and know the fix for this. I have a few projects using this starter and know Im gonna run into it again.
Error in console.
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:69:19)
at Object.createHash (node:crypto:133:10)

Hi Phil, you just need to update your documentation regarding the purge as i assume since the last update, purge is now handled by tailwind directly inside the tailwind config file.

sorry i cant do a PR as my forked version is way off in terms of boilerplate changes

Whenever you run npm run prod, some classes are missing like .py-24 nothing appears in css along with a bunch of other classes

Please could you add a license file and a contributors file to explain your community expectations ?

Guides:

• license
• contributors

I ready to help this great project, i just need a little more context :)

It seems so antiquated compared to Tailwind, plus this is a boilerplate

Hello, I can't seem to figure out why running npm run prod failed, I'm new to WP theme building so any help will be appreciated. Thanks!

2020-10-09T04_38_13_502Z-debug.log

Been looking for something like this to get a project off the ground but came across a little speed bump when trying to build on pipelines and git ftp the project to remote server. Webpack would fail when trying to load ./local so I rapped all the local proxy stuff in an fs.stat

fs.stat('./local', function(access) {
    if (access.errno >= 0) {
        const local = require('./local');
        if (local.proxy) {
            mix.browserSync({
                proxy: local.proxy,
                injectChanges: true,
                open: false,
                files: [
                    'build/**/*.{css,js}',
                    'templates/**/*.php'
                ]
            });
        }
    }
});

Probably not the cleanest thing but works a charm