I rebuilt my personal website with Laravel, VueJS and TailwindCSS as a single page application for learning purposes.
Check it out and let me know what you think.
Any feedback is appreciated.
Looks good. That said, because you said it's for learning purposes, I'm willing to give you a pass. If this were for real, I'd say it's way overkill. (I'm betting you already know that, though. LOL!) The app.js alone is almost 3mb, which takes about 6 seconds over a fast 3G network (almost 20 seconds over slow 3G.)
It looks like you were able to cut out a huge amount of TailwindCSS. Did you use PurgeCSS for that? I recently discovered TailwindCSS and am really liking it, though I'm not a huge fan of all those classes being in the HTML directly.
If I might make a suggestion: I would look for patterns and configure classes to apply tailwind classes to it. Your checkmarks would be a good candidate for that since they're used over and over. You know, the DRY principle. For example, instead of this for every single checkbox:
class="material-design-icon checkbox-marked-circle-icon pr-2 text-green-500"
It might be just this:
class="my-checkmark"
Then in my styles.css, before building the end result, after the tailwind imports, I'd have something like this:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
.my-checkmark {
@apply material-design-icon;
@apply checkbox-marked-circle-icon;
@apply pr-2;
@apply text-green-500;
}
That's just me, though, since I like to see less cluttered HTML, if at all possible. It's still utility-first, but more in the css file instead of the HTML. This is one reason I like Tailwind. It allows for this level of customization so best practices can be retained and keep HTML relative uncluttered.
(Of course, I would never name it "my-checkmark". That's just for demonstration purposes.)
Gertu Drag
My world is spinning
Thank you for sharing! It is a good blog. I am working on my site wagering advisors and I am sure that your advice will help me to upgrade it.