jeffreyvr/tailpress

TailPress is a minimal boilerplate theme for WordPress using Tailwind CSS.

Introduction

TailPress is a minimal boilerplate theme for WordPress using Tailwind CSS.

Getting started

Using the installer

You can get started using the installer (using composer):

composer global require jeffreyvanrossum/tailpress-installer

tailpress new example-theme

If the tailpress command is not found, make sure to place Composer's global vendor bin in your $PATH (see).

Flags you can pass when using the installer:

• Set a theme name --name="Example Theme"
• Choose your compiler, mix or esbuild: --compiler="esbuild"
• Initialize a git repository --git
• Set the git branch name --branch="main"

If you choose to install WordPress through the installer, these flags might be of interest as well: --dbname, --dbuser, --dbpass and --dbhost.

Once your theme is ready, don't forget to cd into the directory.

You will be asked if you would like to have WordPress installed as well. Keep in mind that you still need a local development environment for PHP and MySQL.

Regular method

• Clone repo git clone https://github.com/jeffreyvr/tailpress.git && cd tailpress
• Run rm -rf .git to remove git (or rmdir .git for Windows)
• Run npm install
• Run npm run watch to start developing

General

You will find the editable CSS and Javascript files within the /resources folder.

Before you use your theme in production, make sure you run npm run production.

NPM Scripts

There are several NPM scripts available. You'll find the full list in the package.json file under "scripts". A script is executed through the terminal by running npm run script-name.

Script	Description
production	Creates a production (minified) build of app.js, app.css and editor-style.css.
dev	Creates a development build of app.js, app.css and editor-style.css.
watch	Runs several watch scripts concurrently.

Tips

Styling within the block editor

To make the editing experience within the block editor more in line with the front end styling, a editor-style.css is generated.

CSS classes generated by TailPress

CSS classes for alignment (full, wide etc.) are generated automatically. You can opt-out on this by removing the plugin from the tailwind.config.js file.

Customize colors

Several colors and font sizes are defined from the beginning. You can modify them in theme.json.

Command tailpress not found

Make sure to place Composer's global vendor bin directory in your $PATH so the tailpress executable can be found by your system. This directory exists in different locations based on your operating system; however, some common locations include:

• macOS: $HOME/.composer/vendor/bin
• Windows: %USERPROFILE%\AppData\Roaming\Composer\vendor\bin
• GNU / Linux Distributions: $HOME/.config/composer/vendor/bin or $HOME/.composer/vendor/bin

You could also find the composer's global installation path by running composer global about and looking up from the first line.

Links

• TailPress website
• Screencasts
• Tailwind CSS Documentation
• Laravel Mix Documentation
• Esbuild Documentation

Contributors

• Jeffrey van Rossum
• All contributors

License

MIT. Please see the License File for more information.

tailpress's Issues

[Feature request] Create submenu function with walker class?

Hello Jeffrey, it's me again. Can you create a submenu function with the WordPress walker class? I think this is essentially part of every menu, but there is no submenu option. Honestly, I tried to implement walker class but it was pretty unsuccessful. Thanks again.

Block editor (Gutenberg) freezes when trying to add the custom HTML-block.

Problem:
Whenever I try to add an HTML embed or images to the guttenberg editor it freezes and it does work.

I uninstalled my theme and installed a fresh copy and still have the same issue.

I then uninstalled and installed a basic copy of _underscores and then I was able to embed.

Here is a video recreating the problem:
Video Link

If I remove all the styles from editor-style.css the issue is resolved and I am able to embed the styles. Also, the editor page opens quicker. I will see if I can track down what is causing it but I am not experienced enough.

Thanks

compress theme project to zip file

As we know that any wp-theme could be compressed to a *.zip file for uploading to WordPress site. Would tailpress support the compressing feature?

It would be best practice that finally *.zip shouldn't contain the following files or folders:

• node_modules
• resources
• package.json, package-lock.json, postcss.config.js, tailwind.config.js

There're two approaches for reference:

1. remove or exclude those files when compressing.
2. change current directory structure as the structure of gregsullivan/_tw

First approach is compatible for the current project but the second approach is more clean and engineering because it follow the principle of SoC (Separation of concerns).

watch production

Is there a way to npm watch and output production files?

I'm seeing many issues with postcss-nested due to PostCSS 8 that do not happen in development but do happen in production.

It's very annoying to code up an entire site and then switch to production run and find many issues with the css because of bugs in postcss-nested.

There are several open issues on the postcss-nested repo about the problem.

Browsersync does'nt open proxy link?

Hi,

Really like your project but the script: npm run watch-sync, does not seem to open the given proxy link.
When I try it, it opens: localhost:3000 instead of tailwind.test:3000 (I'm using Laravel Valet).

Any idea how to fix this? Thanks!

rm -rf .git not a command on windows

I was wondering if you could help me with this issue

rm -rf .git not a command on windows

How to use tailwind classes into the wordpress page/post?

Hello,

I tried using css classnames into the wordpress page / post but it seems like its not working.

Tailwind partially built, missing css class

After building assets with npm run dev can't have access to all tailwind default class (eg tailwindcss padding).

Example the p{t|r|b|l}-{size} class is not generated for all spacing, only having some in the final theme css.

Tried to specify spacing in theme.json with no results...any ideas ?

Custom JIT classes not working

Hi Jeffrey,

Thank you so much for creathing this theme!

Just a couple of questions:
Apologies if you've already covered them.
I can't seem to add custom classes with JIT. Do I need to activate it somewhere? I looked on the JIT github and it does not look the same as yours in the tailwind.config.js and I can't find the postcss.config.js. I'm sure I'm doing something wrong.

Thaks very much for your help

Error when trying to define new value for default color

When I try to set a new value for i.e. "blue" in tailpress.json

{
    "colors": {
        "blue": "#77a9c1"
    }
}

and then run

npm run development

I'm getting an error:

The `text-blue-500` class does not exist, but `text-gray-500` does. If you're sure that `text-blue-500` 
exists,  make sure that any `@import` statements are being properly processed before Tailwind CSS 
sees your CSS,  as `@apply` can only be used for classes in the same CSS tree.

Any idea how to overwrite the value of an existing color?

Margin issue with wide width cover block

Hi. First off, thanks for your awesome work on this starter theme! I have run into a minor issue that I hope you can help with.

When adding a cover Gutenberg block to your page and setting the alignment to 'wide width', the block's alignment is messed up on the front end:

The only way to resolve seems to be to override the -mx-16 class that your plugin applies to .alignwide with something like mx-auto but this obviously prevents the block stretching past the bounds of the container.

Tailpress + TailwindUI

Hi! Thank you for this great theme. It has been really helpful.

Is there a way to implement TailwindUI components with Vue or React to Tailpress?

Additional classes not working

Nothing happens when I add tailwind classes on paragraph/heading additional classes in admin...

Upgrading to Tailwind CSS 2.2.0 causes infinite loop when watching for changes

When I now 'npm run watch', i get an infinite loop, any idea what is changed?

add scripts

Hi,

How can i add my own scripts? For instance, i'm trying to add 'flickity'(https://flickity.metafizzy.co/).

I've tried to run 'yarn add flickity' which add flickity to the node_modules directory in my theme folder.
After that added this line in my tailwind.config.js file:

plugins: [
    tailpress.tailwind,
    require('flickity'),

]

But this gives a whole lot of errors when running 'yarn watch'.

Another this i tried is downloading flickity.pkgd.js and placing it in the /resources/js folder.

After this, i've added $('selector').flickity(). to my app.js file.

Both ways, i get a console error :

Uncaught ReferenceError: Flickity is not defined
at Object../resources/js/app.js

I know this is some basic setup problem, but can you help me out any way?

PurgeCSS > add classes to safelist / whitelist

Hi,

i'm trying to add classes to a safelist for purgecss, like this:

purge: {
        content: [
            './theme/*.php',
            './theme/**/*.php',
            './resources/css/*.css',
            './resources/js/*.js',
            './safelist.txt'
        ],
        options: {
            safelist: [
                'bg-lichtroze',
                'bg-roze',
                'bg-paars'
            ]
        }
    },

This is because these classes are added as a php value from a Wordpress ACF field, like this:
<?php the_field('background-color'); ?>

So they are stored in the database..

The classes don't exist in my code and are not found by purgecss..

The safelist works, but only with JIT mode turned off.
Any idea how i can get this to work with JIT mode turned on?

Same issue is described here: tailwindlabs/tailwindcss#2829

Bug with js compiling while running npm run watch

Hi, I just tried to implement a JavaScript-Function, so I wrote the code in ressources/js/app.js, like it is done for the primary menu toggle.
I wondered why it didn't work, so I checked the compiled js file from js/app.js and the code wasn't there. I then did a npm run watch:js separately and it seems it doesn't work and the following error message comes up:

[1] npm run watch:css-editor exited with code 1

\wp-content\themes\tailpress> npm run watch

> [email protected] watch
> cross-env NODE_ENV=development concurrently "npm run watch:css-app" "npm run watch:css-editor" "npm run watch:js"

[2] 
[2] > [email protected] watch:js
[2] > ./node_modules/.bin/esbuild "./resources/js/app.js" --bundle --outfile="./js/app.js" --watch
[2]
[0] 
[0] > [email protected] watch:css-app
[0] > tailwindcss -i "./resources/css/app.css" -o "./css/app.css" --postcss --watch
[0]
[1]
[1] > [email protected] watch:css-editor
[1] > tailwindcss -i "./resources/css/editor-style.css" -o "./css/editor-style.css" --postcss --watch
[1]
[2] The "." command is either misspelled or
[2] could not be found (translated from german for understanding purpose).
[2] npm run watch:js exited with code 1
[1] 
[1] Rebuilding...
[0]
[0] Rebuilding...
[1] Done in 3211ms.
[0] Done in 3219ms.

Do you have the same problem?

Override alignwide class

Hi Jeffrey, I have the following problem:
I want to switch the screen sizes in tailwind.config.js to the following:
screens: { xs: "480px", sm: "600px", md: "782px", lg: tailpress.theme("settings.layout.contentSize", theme), xl: "1280px", "2xl": tailpress.theme("settings.layout.wideSize", theme), },
2xl is 1440px large.
Inside the theme.json I changed:

"layout": { "contentSize": "960px", "wideSize": "1440px" },

Now I wondered, why the max-width of alignwide is still 1280px as in your default config, so I looked up into it and found that the align- classes are changed in the tailpress plugin. Now I would have to change it inside your plugins files:

const maxWidthUtilities = { '.max-w-wide': { maxWidth: ${screens['2xl']}, }, '.max-w-content': { maxWidth: ${screens['lg']}, } };

I would have to do that inside _node_modules which is obviously not what I want and that leads to various problems. Is there something I am missing here, or what way would be the best to do it? Would be nice, if you could implement an easier way to change that

Custom border widths breaks default border width

For some reason when I add custom border widths to tailwind.config.js, the default border-with: 1px gets ignored. Why is this?

borderWidth: {
default: '1px',
'0': '0',
'2': '2px',
'3': '3px',
'4': '4px',
'6': '6px',
'8': '8px',
'10': '10px',
'20': '20px',

    },

Tailwind 3

When will you release tailwind 3?

Is there any plan to use blade views in the theme?

Thanks

Dark theme ?

Hi, is the dark mode options available ?

Install path

In getting started, https://github.com/jeffreyvr/tailpress
Could you explicitly say this is a WordPress theme to be installed in /wp-content/themes.
Thanks

Is Tailwind JIT working correctly?

Just came across TailPress today. Nice work! I just had a couple of queries as I'm new to TailwindCSS JIT.

If you take a look at Adam's YouTube video he's removed all the base styles to make the styles added by the JIT compiler clearer.

So, these were removed:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

I did the same in TailPress so I could see the JIT compiler in action. However, when I removed the base styles and updated the styles in JS or PHP files, no classes from JS or PHP were added to the compiled CSS .

I can though, add custom styles directly to resources/css/app.css and these get compiled and added to css/app.css.

Am I missing something? If I understand it correctly, with the base styles removed, then we should still be able to see the TailwindCSS classes pulled from the JS and PHP and compiled into css/app.css?

Also, apart from the CSS reset, shouldn't we be removing the base styles by default anyway as this is JIT compilation so we should be adding only the classes used in the content (JS and PHP) rather than all base styles as we did pre TailwindCSS JIT.

Wrong path on CSS background image

My path for images in the theme is on mytheme/resources/images.
If I try to build background-image: url('../images/shuttle.png'); the output becomes background-image: url('/images/shuttle.png?d4a53ce1e7463f4937d167599ed4763f'); So because it's the wrong path the image does not display.

Any idea why this happens and how to solve it?

Missing mix-manifest.json warning

Hi, this boilerplate is great thank you!

I'm getting this warning:

Warning: file_get_contents(/var/www/html/wp-content/themes/tailpress/mix-manifest.json): failed to open stream: No such file or directory in /var/www/html/wp-content/themes/tailpress/functions.php on line 26

mix-manifest.json exists in the theme folder but it doesn't get copied. I'm running this with docker.

Thanks!

JIT in WP editor

Is there a way to use JIT in the WP editor?
I can't make it work.

Add step "npm install" to website

The step where you need to run npm install seems to be missing from the website. This is "obvious" for those that know how npm works, but could be troublesome for beginners, etc.

Between step 2 and 3 you have to run npm install otherwise an error occurs. It doesn't seem that step 2 or 3 covers this.

Custom font loads only after moments

Hi Jeffrey, fantastic work on the tailpress-theme. I currently use it for a relaunch of my companies website. I want to use a custom font. So what I did was to add @font-face rule to the custom.css-file. Then in the tailwind.config.js file I extended the following:

  extend: {
           fontFamily: {
               sans: ['Greta Sans Std', ...defaultTheme.fontFamily.sans]
           }
       }

When I open the website now, the font is loaded correctly but only after a few milliseconds, so first the other font is shown. Is there a way to load the fonts before in order for correct font loading? I also set font-display to swap. Would be nice to know how you would do it, thanks!

I think image with alignnone must follow its parent, so mx must be auto.

I think image with alignnone margin x must be auto, so its image align can follow it's paragraph container...

Browser-sync

When running 'npm run watch', with Browsersync enabled, I see the following message in terminal:
"[Browsersync] File event [change] : css/app.css"

But I have to reload my browserwindow manually?? How come?

Prec-compiled version

Can you push a precompiled version, can’t run nom on my intranet.

Error with npm run development

I get the following error when I try to run npm run development

`[webpack-cli] [Error: EINVAL: invalid argument, mkdir 'C:\github\tailpress\C:'] {
errno: -4071,
code: 'EINVAL',
syscall: 'mkdir',
path: 'C:\github\tailpress\C:'
}
npm ERR! code 2
npm ERR! path C:\github\tailpress
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c webpack --progress --config=C:\github\tailpress\node_modules\laravel-mix\setup\webpack.config.js

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\cg\AppData\Local\npm-cache_logs\2021-02-03T17_05_30_180Z-debug.log
npm ERR! code 2
npm ERR! path C:\github\tailpress
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c mix

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\cg\AppData\Local\npm-cache_logs\2021-02-03T17_05_30_373Z-debug.log`

composer not firing

Am I missing a step?
After install running the install and ran the command and got nothing.

"tailpress new example-theme"

What are the enviro requirements?

Thanks

tailpress_content_start

Hi Jeffrey,

What does tailpress_content_start do ?

dont working building js in resourses folder to js

hi there,
I can’t understand why from the resources folder, js is not compiled into the js folder

Some Tailwind Classes Not Present?

I'm new to tailwind but so far I'm loving it, so thank you for your work in bringing it to WP. After running "npm run watch" and the previous commands most things seem to work, and I was able to add custom fonts and other styles.

However, in trying to add a grid layout with something like:

the "grid" classes are not available and do nothing. Same with things like border-color that are built into tailwind from their docs.

Am I missing a step or is there an import I'm supposed to add to bring in all the available Tailwind classes?

Improve styling of comments-template

fontSizes not actually changing the font size in the block editor

I am noticing the font size is not getting changed for the custom font sizes. Allows to select the size but nothing happens. Do you see this?

Also having issues with the previous version of Tailpress and it not allowing to select font size.

Postcss fails with CssSyntaxError Unclosed string for valid strings

Hello,

I need help about this problem. I don't find a solution for CssSyntaxError Unclosed string. It's from postcss-Loader config ? What i am suppose to do to fix it ?

` 547 | transform: rotate(100deg);

548 | content: url("data:image/svg+xml,%3Csvg width='32' height='31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.47 15.908 10.6 5.133M16.609 6.21l6.601-3.118M7.336 21.283l2.032 3.531' stroke='%23AAD7FF' stroke-width='4.759' stroke-linecap='round'/%3E%3C/svg%3E");
| ^
549 | }`

Thank you !

Aria support for tailpress

I installed and started to use your Tailpress theme and it is awesome (thanks).
I built a primary menu which shoes correctly on the website, but I don't know how to handle the "aria" tags and css styles when the menu item is selected/hovered or is a sub-item (and should be hidden).

Thank you in advance for your help!

Loading custom fonts

I need to load a custom webfont (not coming from Google or any other CDN) into a Tailpress project.

I currently added the @font-face declarations in the custom.css file and the actual woff and woff2 files into the resources directory. When the Laravel Mix build is run, I can see that the woff and woff2 files are correctly placed in a fonts directory in the theme's root.

The issue however comes up as the generated app.css file is trying to load the font files from the project's root directory (/fonts/) and not the theme directory (/wp-content/themes/theme/fonts/).

What is the best way to go about this, please? Since the @font-face src URL will never match whatever is generated in the app.css - as far as I know at least.

Thanks!

Gutenberg Styles not applying on front end

WordPress 5.7
NGINX
PHP 7.4
tailpress 0.0.8

Installed a fresh copy and added some blocks and styles to a post.
Did not edit any theme files at all. Ran dev build, then production.

Styles are applied when viewing in the Gutenberg editor but not on front end.

What is the best way to achieve this? I would like for styles applied on the block editor to apply on the front end.

Thanks

npm run dev and npm run watch fail

Hi, first thank for your project, when run npm run dev i get this error:

My environment:
Windows 10
npm: 7.2.0
I not had problem to install only when i run
npm dev
If i run ./node_modules/.bin/esbuild resources/js/app.js --bundle --outfile=./js/app.js i get:
js\app.js 335b

⚡ Done in 200ms

Thank advance!!

Running npm install fails due to 404 on dev dependency

Running an npm install command throws this error because @jeffreyvr/tailpress-example_theme is a devDependency in the example theme's package.json, which isn't a npm package.

> npm install alpinejs
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@jeffreyvr%2ftailwindcss-example_theme - Not found
npm ERR! 404
npm ERR! 404  '@jeffreyvr/tailwindcss-example_theme@^0.1.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mariobornamjertan/.npm/_logs/2021-08-27T17_03_39_849Z-debug.log```

Automatic compilation of Gutenberg blocks

I am obviously struggling with JIT when using Gutenberg blocks. Wouldn't it be somehow possible to render all templates to temporary file first and then include this in the purge option in tailwind config? Safelist works fine for simple themes but not for complex designs with hundres of classes. I think this is the only real issue I've discovered so far.

Thank you for an amazing theme Jeffrey, really appreciate it.

Changes in custom Partials not recognized by tailwindcss ... --watch

Hello, I would like to use Tailpress with the principle of cutting by file that Sass allows (partials). I would have liked for example to be able to add files in tailpress/resources/css/app.css in this way:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* SASS APP */
@import "sprite", "cards";

It works without problems but the watcher doesn't look at these files and so I have to restart the compilation by hand. I looked for tailwind, but it seems that the tailwind watcher only takes one input file (-i, -input file), so I guess it doesn't see the others.

In previous versions of Tailpress running under mix, it worked very well.

Do you have a solution for this problem?

Thanks for your answer and for this great project!

How to enable browser sync?

Hi there,

Can you kindly provide some instructions on how to enable browser sync or live reload with this package please?

error in app.css and in sources files

When I run 'npm run watch' in app.css I have code like this:
*, ::before, ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; }
I have bold the problematic entries.

In my opinion if we do not have a value, it is best not to show this parameter. In this moment I have:
--tw-blur: ;
--tw-brightness: ;
and others.. For what purpose?

Second problem.. Why we have in resources/css/custom.css (not scss) but structure like with scss?

static testing = false;

When running development or watch I get this error

static testing = false;

Does Tailpress plan to support WordPress Full Site Editing?

Hi @jeffreyvr thanks for all your amazing work! I was wondering if Tailpress has supporting Full Site Editing on the roadmap?

Thanks
Kris