jeffreyvr / tailpress Goto Github PK
View Code? Open in Web Editor NEWTailPress is a minimal boilerplate theme for WordPress using Tailwind CSS.
Home Page: https://tailpress.io
License: MIT License
TailPress is a minimal boilerplate theme for WordPress using Tailwind CSS.
Home Page: https://tailpress.io
License: MIT License
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
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!
When I now 'npm run watch', i get an infinite loop, any idea what is changed?
Can you push a precompiled version, can’t run nom on my intranet.
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?
Hi, is the dark mode options available ?
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 !
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
Nothing happens when I add tailwind classes on paragraph/heading additional classes in admin...
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!
hi there,
I can’t understand why from the resources folder, js is not compiled into the js folder
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.
When running development or watch I get this error
static testing = false;
Is there a way to use JIT in the WP editor?
I can't make it work.
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```
When will you release tailwind 3?
Is there any plan to use blade views in the theme?
Thanks
Hi there,
Can you kindly provide some instructions on how to enable browser sync or live reload with this package please?
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?
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
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.
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
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.
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
Hello,
I tried using css classnames into the wordpress page / post but it seems like its not working.
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!
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.
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:
Am I missing a step or is there an import I'm supposed to add to bring in all the available Tailwind classes?
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
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',
},
Hi @jeffreyvr thanks for all your amazing work! I was wondering if Tailpress has supporting Full Site Editing on the roadmap?
Thanks
Kris
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!
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.
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!!
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:
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).
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!
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?
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.
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.
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 ?
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!
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?
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
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?
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?
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?
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`
I was wondering if you could help me with this issue
rm -rf .git not a command on windows
Hi Jeffrey,
What does tailpress_content_start do ?
I think image with alignnone margin x must be auto, so its image align can follow it's paragraph container...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.