Mantine
gregrickaby opened this issue · comments
I'd like to replace Tailwind and custom components for Mantine.
Phase 1
- Remove Tailwind, autoprefixer, and postcss packages
- Remove global CSS
- Remove all Tailwind markup in HTML
Phase 2
- Install Mantine
- Refactor both
app.tsxand_document.tsxto instantiate Mantine - Replace React Icons with Tabler icons
Phase 3
- Replace or refactor custom components and pages to use Mantine components
- Test all the things
Have you made a start on this @gregrickaby? Happy to help.
@leonlafa I have. Just haven't pushed my branch yet (but will today).
If there's anything else you see (either issues or in the codebase itself) feel free to create an issue and tackle it!
@leonlafa I've got the initial work up here and Mantine is configured.
Feel free to jump in and begin work on Phase 3 items!
@gregrickaby I'm working on Phase 3 today.
Would you like me to keep the styling for the nav links as the default Mantine or
style it the way it was before when we had Tailwind in the app?
For example, Mantine, in their example use the following styling:
nextjs-wordpress-issue-26-mantine-header-example.mov
@leonlafa Good morning!
I'm 100% onboard with using default Mantine components/styling with light tweaks via createStyles() here and there.
You and I are on the same page, because your screencast looks like https://ui.mantine.dev/category/headers#header-menu (which is exactly what I was thinking of using). So far I've got the provider and <Layout /> component scaffolded. This should clear the way.
I've been pushing to this branch https://github.com/gregrickaby/nextjs-wordpress/tree/feature/%2326-mantine, and now that you're a collaborator (💪🏻 ) you should be able to commit and push to that one too.
While you work on components, I'm going to refactor the <CommentForm> to use Mantine's form workflow.
Thanks again for all the help!!!