-
Notifications
You must be signed in to change notification settings - Fork 46
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Tailwind Support to WP-Scaffold #105
Comments
@Firestorm980 @Nikki-Jones - I would be keen to help out on this! |
I too would love to assist with this. I've had a crack at this recently at my past job and it would be interesting to revisit with some fresh perspectives. I have a few thoughts that I've organized here below: Classnames in blocks Generator Command
I imagine the two-second solution would just be to checkout a given branch or something to that effect but this seems like it could also be useful beyond just this feature we're discussing, so I wanted to mention it. |
@iansvo I like the idea of having a generator command or similar. I think that makes more sense versus adding the files to the scaffold that would be required and having a hook or something like that. Like you said, it makes it more like I have a few points I'd like discussion on as well. They don't need immediate answers, but we should give them some thought:
|
The conversation going on here already sounds promising.
I think let's get all of our concerns down in this ticket. Regarding @iansvo generator idea, I like it! Though probably not through
It would be great to see this ticket owned by a number of us, so far we're on 4. Would a weekly or fortnightly sync be worthwhile? We can manage it async like the WP community does? |
@dainemawer @Firestorm980 @iansvo I love all the interest on this, get's me so excited! Here's a little update on where we're at, sorry I didn't add this to the ticket initially. @Firestorm980 has a POC using an older version of tailwind. My goal is to update this to the latest version of the toolkit and tailwind to see how tailwind's new JIT compiler behaves with our setup. I can add this to the PR and then get some more of your feedback. The next steps I see after this would be:
Some responses to your Q's: @Firestorm980 @dainemawer Let me know what you all think, I should be able to get this initial PR started by early next week :) |
Thanks for the feedback here @Nikki-Jones ! Great stuff. Okay so! Im going to add a checklist to this Github issue with some of our next steps. I think we should all be on the same page going forward before I do so, so Im putting this up for a vote, a simple 👍🏻 on this comment will do!
Does that sound good for next steps? |
Hey, @Nikki-Jones and @dainemawer Just wanted to drop my notes here in regards to Frontity. As far as I'm aware, we won't be using it moving forward on new projects. We'd likely move toward some sort of Next.js project. I'm hyped to see this taking shape! I wonder if these tasks warrant living in TeamWork to distribute and document? |
@Nikki-Jones @devinle @Firestorm980 @iansvo here is a working doc that we can use to flesh this work out: |
@dainemawer Thanks for getting that started. I put in some details just now for Goals, considerations, and next steps. @devinle I personally would love to see this in a TW project once we get a few more things ironed out, should make it easier to keep track of. |
@Nikki-Jones @dainemawer @Firestorm980 I'm pleased to report I was able to get some resourcing time to work on this a bit today. I've created a POC branch using v3, looked at @Firestorm980's POC as well during creation. Here's an overview of where everything's at with it: https://github.com/iansvo/wp-scaffold/tree/feature/tailwind-v3
I also added a few things into the doc that @dainemawer shared above, including some of what I'm about to mention. One thing that's a huge roadblock here is Webpack's lack of support for glob patterns. This fundamentally complicates the process of watching for changes and using the content patterns (which in general use globs). See the Engineering Considerations section in the doc for more details. Would love to get some thoughts on what should do to address. |
@iansvo @dainemawer @Firestorm980 here is the POC I was working on with more of a hybrid solution for bringing values from the theme.json in to the tailwind.config. You will notice I'm defining custom theme.json layout values and then extending the maxWidth values. https://github.com/10up/wp-scaffold/tree/feature/tailwind-v3-hybrid Some notable features:
@iansvo I'm don't think I'm running in to the same webpack issues you're having. Could you check this out and let me know? |
@Nikki-Jones Yeah it looks like you weren't, thank god. It appears that I must've just not tested without the glob that catches root PHP files like I thought, or something. Plus the Tailwind docs indicate this actually shouldn't be able to work, so that added to it I guess. I found that simply removing that one piece from the content globs actually solved my problem (derp). Either way, I'm glad the solution ended up being simpler than it appeared. This is what I was testing with just now:
This is however somewhat of a problem because we need to be able to look at the default WP files. I feel like we could create a simple safelist pattern with relative ease though and just leverage that for this purpose, vs using a global blob. My thought is that this was happening back of those asset.php files that we generate when we compile the files, which would be a **/*.php match for sure. I"ll continue to mess around with a few things and provide some additional feedback/thoughts on your take. Super cool to see this taking shape! |
@iansvo @Nikki-Jones Looking at the branches, I think we could modify this config to handle most of the WP themes we deal with, and include some documentation on when / how to extend the config. The following includes WP template hierarchy files for primary and secondary templates. If a theme needs a more specific template, it'd be up to the engineer to make sure they're included. content: [
// Root files
'404.php',
'archive.php',
'attachment.php',
'author.php',
'category.php',
'date.php',
'footer.php',
'front-page.php',
'functions.php',
'header.php',
'home.php',
'index.php',
'page.php',
'search.php',
'searchform.php',
'single-post.php',
'single.php',
'singular.php',
'tag.php',
'taxonomy.php',
// Directories
'assets/**/*.js',
'includes/**/*.{js, php}',
'partials/**/*.php',
'templates/**/*.php',
], Thoughts? |
Solid! I think this should cover most use cases. I wonder if we could also
do single-*.php and similar name variants easily enough by glob?
On Fri, Apr 29, 2022 at 2:37 PM Jon Christensen ***@***.***> wrote:
@iansvo <https://github.com/iansvo> @Nikki-Jones
<https://github.com/Nikki-Jones> Looking at the branches, I think we
could modify this config to handle *most* of the WP themes we deal with,
and include some documentation on when / how to extend the config.
The following includes WP template hierarchy files for primary and
secondary templates. If a theme needs a more specific template, it'd be up
to the engineer to make sure they're included.
content: [
// Root files
'404.php',
'archive.php',
'attachment.php',
'author.php',
'category.php',
'date.php',
'footer.php',
'front-page.php',
'functions.php',
'header.php',
'home.php',
'index.php',
'page.php',
'search.php',
'searchform.php',
'single-post.php',
'single.php',
'singular.php',
'tag.php',
'taxonomy.php',
// Directories
'assets/**/*.js',
'includes/**/*.{js, php}',
'partials/**/*.php',
'templates/**/*.php',
],
Thoughts?
—
Reply to this email directly, view it on GitHub
<#105 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACUBZRHY4Q4B7X4MHU6SQ5DVHQT6HANCNFSM5S5EMC3A>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
--
Regards,
*Ian Svoboda*
Senior Frontend Engineer · 10up, Inc <http://www.10up.com/> · @10up
<http://www.twitter.com/10up>
*email address: *i ***@***.******@***.***
*time zone: Eastern Daylight Time (UTC -4)*
*preferred pronouns: he, him*
|
@iansvo @Firestorm980 feel free to open a PR against the branch with the updated content list and any namespace patterns you come up with :) |
So great to see progress and commitment here 🚀 A few small pieces of feedback from my side to help us get aligned:
@Nikki-Jones this is a great start! Any thoughts on adding https://github.com/tailwindlabs/tailwindcss-forms ? There are a lot of forms in WP (search, comments, etc)
@Firestorm980 is it possible to make this somewhat extensible? We can carry on providing as many edge cases in here as possible, but the path of least resistance is to leave it up to an individual engineer at the end of the day. Workflow We kinda have 3 forks at the moment, Nikki's, Jon's and Ians - lets try to tame that so we can work in a more efficient manner. If the MVP of this project will exist as a branch (for now) - lets create an epic branch straight off of It would be great for us to choose which one of the 3 forks gets us as close as possible (considering our progress) to what we're trying to achieve, and work off of that stable codebase to figure our the rest of the priorities. Based on my reading thus far, that appears to be @Nikki-Jones 's work? But I may be mistaken? Safelisting
VSCODE Prettier |
Pull Request: #156 |
Is your enhancement related to a problem? Please describe.
Enhancement: Add Tailwind v3 support to WP-Scaffold.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Read more about Tailwind: https://tailwindcss.com/
Note: Opt-in functionality is limited to checking out the
epic/tailwind-v3
branch or downloading a zip as described in the PR belowPR
#156
Contributors
@Firestorm980 @Nikki-Jones @dainemawer @iansvo
Designs
No designs required
Code of Conduct
The text was updated successfully, but these errors were encountered: