Building A Comments System With Vue.js, Laravel, and Tailwind CSS Part II

by Nick Basileon Apr 26, 2018

Last week, we started building our comments system with some Vue.js components.

Now that we have our functionality in place let's style everything with Tailwind CSS. If you'd like to follow along, feel free to check out the repository on GitHub.

Where To Start?

When we're styling a new component or page, we typically have two obvious places to start. We can style all of the little page elements atomically, or we can start with the big picture and get the page layout done.

I find that I'll take the atomic approach on an established project where I have a better sense of what each element should look like, and because my layout is usually fixed by then. On a more greenfield project like this one, I find myself drawn to creating the layout first because I find that having a layout helps me design a better visual hierarchy for the page elements.

In your projects, it's always a great idea to make a note of your development patterns and style. There's no right or wrong approach, just your way of doing things. So, developing an understanding of your behavior helps you be consistent in your approach while also highlighting areas that could use improvement or experimentation.

For this project, let's start with our page layout and work from there.

Laying Out The Page

Since we're working from the outside in, we can start all the way at the beginning with our <body> tag inside of app.blade.php. Now, we shouldn't necessarily use the <body> for helping with the layout. Because, when we use a template system like blade or Vue and then use the <body> for layout, we can find ourselves designed into corners where different templates break the initial layout.

Next thing you know, we have a couple of different top-level layout templates, and our project is much harder to maintain. That said, we can use the <body> for styles that we'll use throughout our project. For us, that means we can add the font family here, and we'll also apply a slightly off-white background color.

Whenever we're looking to level up a design, picking a high-quality font is a great place to start. For this project, let's use the Nunito font. To add it to our project, we'll import it at the top of our app.sass file, and we'll modify our Tailwind config to add a class for it.

Looking at our browser now, we can see that our page is already starting to come together!

Adding a simple, off-white background color adds a bit of contrast to the page and helps the nav and content stand out. And our Nunito font makes the typography rounder, smoother, and a bit friendlier.

Now we can move onto our <nav>. Out-of-the-box, Laravel hooks us up with the latest version of Bootstrap and provides some default styling. For the most part, it's pretty good. We'll make a few tweaks to make it line up better with our comments.

On the <nav>, we can add .px-5 to add some whitespace around the edges. Then, inside of the <nav> we can see a <div> with a class of .container. On this <div> we'll add .max-w-3xl and .p-0 to override the .container's styles.

This is an excellent example of how we can use Tailwind in conjunction with Bootstrap to get the customization our project needs. Before we hop into our Vue files, we have one more class left in app.blade.php.

Pro Tip: If you're going to be mixing Bootstrap and Tailwind extensively, make sure you enable the Tailwind prefix because they share a few class names.

On the <main> tag, we'll add .px-5 to give our content the same padding as our <nav>.

//app.blade.php
<main class="py-4 px-5">
@yield('content')
</main>

Just like that, we have the bulk of our layout taken care of, and we didn't have to write any CSS to customize Bootstrap!

Styling The Add Comment Form

With our layout mostly taken care of, let's move onto styling our comments. We can start by styling our "Add Comment" form, but before that, we have one more layout style to finish.

Hoping into CommentsManager.vue, we can add .max-w-3xl and .mx-auto to the outermost <div> so it stays centered on our page.

Lately, I've been enjoying using Steve Schoger's approach to form inputs where he makes them grey instead of messing with the border colors. This does an excellent job of making the inputs easier to read and more distinct on the page. So, let's take that approach with our <textarea>.

Mamma mia, that is a beautiful looking form. Now at this point, I hope you have one big question for me, "What the heck is that Cancel button there for?" Let's take care of that right now.

Wiring Up The Cancel Button

Vue.js sneaking into the Tailwind section of this series, what blasphemy! I left it to this point because we'll use it to make a UI upgrade instead of for a core piece of functionality. We're going to be leveraging Vue's dynamic classes to expand the <textarea> when the user is ready to add a comment and then the cancel button to exit that state.

With those methods in place, we can start wiring up our template! We'll start by adding that dynamic class to our <textarea> to toggle the height of the element when we're editing. We'll also bind startEditing to the @focus event so we can update the state when the user starts writing.

We'll add a v-show to our <button>s wrapper <div> to hide them when we're not editing, and we'll wire up that mysterious Cancel button, so it starts working.

Hopping back into our browser, we can see that the buttons are now hidden until we focus on our <textarea>. I think this is a nice UI pattern because it doesn't clutter the interface with too much information, but it still provides that additional detail when the context needs it.

Now, let's finish styling the rest of our comments.

Styling The Comments

Once again, we'll start from the outside in. Inside of CommentsManager.vue, we have a <div> wrapping our CommentItems. We'll start by adding the background classes that we used on the "Add Comment" form to this. We'll also start tracking the index in the v-for and use another dynamic class to apply some margin-bottom to every CommentItem except the last one.

With the wrapper <div> taken care of, we can hop into CommentItem.vue to take care of the comment styles. We'll start with the comment itself. We can add some positioning classes to its wrapper <div>, then we'll style the text itself, and finally we can add some styling to the Edit button as well.

Heading back to our browser, we can see that our comments have come to life!

All we have to do now is style the update form. This will be pretty similar to our "Add Comment" form, but we'll make sure to give the <textarea> a non-dynamic height and style the delete button a bit differently than the other buttons.

The Wrap-Up

Every time I get to make a UI from scratch with Tailwind, I'm always blown away by how fast and straightforward it is. We didn't write any custom CSS, we worked with another framework, and we have some awesome looking comments.

Now that our styling is done, in the next post, we can work on using Laravel and MySQL to persist our comments. As always, feel free to ask me any questions on Twitter. And until next time, happy coding!

Nick Basile

I'm a full-stack developer working with Vue.js, Laravel, and more. In my spare time, I read, tweet, blog, and put together a newsletter.