All right, so we have our example Vue app. Now we need a front end where a user can create and edit their notes. Opening back up our source code, the first thing that I'm going to do is pull in Tailwind CSS. So to start off with, let's get rid of this style block that's in here already, and open up a terminal window. And we're going to use this to run npm install for Tailwind CSS, PostCSS, and AutoPrefixer. All right, once these are ready to go, we should create a Tailwind.config.js file in our site root. So touch Tailwind.config.js, and let's go ahead and open that up. In here, I'm just going to paste in a default configuration file that's recommended. And moving on, we should also create a PostCSS config file. And open that one up as well. Again, I'll just post in a recommended starting point. And the last thing that we need to do is actually create a CSS file to pull Tailwind into. Let's

And open that one up as well. Again, I'll just post in a recommended starting point. And the last thing that we need to do is actually create a CSS file to pull Tailwind into. Let's go ahead and create that in our source directory. And lastly, open that up. And to pull Tailwind in, we just include this at Tailwind symbol, and we include base, components, and utilities. This will pull in the entire Tailwind framework, regardless if we're using it all, and that's quite a lot. So we can actually open up our Tailwind config file, and under this purge array, we can include some files for our asset compiler to look for, and determine what styles are put in the markup. That way it only keeps the ones that are actually being used. So with this, it looks at the main public/index.html file, as well as any view and JavaScript files under any folder in the source directory.

that are actually being used. So with this, it looks at the main public index.html file, as well as any view and JavaScript files under any folder in the source directory. We can save that and exit it. And now the last thing to do is actually import Tailwind into our main JavaScript file. So underneath the import AppComponent, import app.css. Okay, so now let's create some markup and see if our work paid off. In our main app view file, I'm just going to scaffold out a basic frontend using Tailwind that'll have a sidebar and a main area. All right, let's head to our browser and see if that worked. All right, perfect. We're seeing a little sidebar area here in gray, a border that we expected, and a large area here for our main content. Which means that Tailwind CSS is pulling in as we expected and styling the elements that we put in through the utility classes. Now we need an area for users who

for our main content. Which means that Tailwind CSS is pulling in as we expected and styling the elements that we put in through the utility classes. Now we need an area for users who actually type in a note. So I'm thinking about using a WYSIWYG editor in this large main area. But there are a lot of options to choose from. The one that I prefer using nowadays though, is called TipTap. And you can learn more about it and check out the documentation at tiptap.dev. It brands itself as headless, which means that it doesn't really come with a user interface off the bat. It's more functionality that you wrap your own styles around, as opposed to being a ready-made frontend that you drop in as well. But that's perfect for our application as a full page editor. And the good thing about this is that it installs seamlessly into Vue 2 and Vue 3. We already have a Vue project set up, so it looks like all we need to do is install the

And the good thing about this is that it installs seamlessly into Vue 2 and Vue 3. We already have a Vue project set up, so it looks like all we need to do is install the dependencies. We'll just copy this and go back into our terminal. And while that's installing, let's check out the rest of the documentation. Okay, create a component and import the Editor and EditorContent from TipTap, as well as a starter kit. And we just put this EditorContent element into our markup. I'm going to go ahead and copy that. And whenever the mounted lifecycle event happens, they're creating a new Editor and passing in some content already to it. They're also including this starter kit extension, which will help us with some bare-bones functionality. And then before unmount of the Vue component, it gets destroyed. Sort of cleaning everything up. All right, let's go back to our terminal and see how that's running.

bare-bones functionality. And then before unmount of the Vue component, it gets destroyed. Sort of cleaning everything up. All right, let's go back to our terminal and see how that's running. Perfect, everything is set up so we can clear out of this and focus back on our markup. So okay, the first thing that we needed to do was import the Editor and EditorContent from TipTap Vue 3 and import StarterKit from TipTap StarterKit. Now in our main component export, we can create a components object and just export the EditorContent. We'll need to initialize this editor as a data attribute. So in a data object, we'll return editor as null for right now. And then in the mounted lifecycle method, we'll create a new editor to that data attribute. And unlike the demo that we saw on the documentation page, I'm not going to include any content off the bat, but I do need to pass in that extension, StarterKit.

And unlike the demo that we saw on the documentation page, I'm not going to include any content off the bat, but I do need to pass in that extension, starter kit. Starter kit. And lastly, the beforeUnmount method called destroy on the editor. Okay, so the only thing that we have to do now is just add that editor into our markup. I'm going to include it in the main content area. So I'll just paste in that editor content element. And we bind that editor attribute for the Vue component to the editor data attribute that we set up below. Now before we check this out in the browser, I'm actually going to wrap this in another div styled with some more Tailwind CSS to allow it to take up the whole area. Okay, that's better. Now let's check this out in the browser.

it's all formatted as HTML. But you might be saying it doesn't really look like that. And you're right. But if we inspect each of these, we can see that indeed, the HTML is there, we have an h1 tag and h3, and an unordered list with our three items. The problem though, is that we are using Tailwind. And as a default, there's no styling on individual elements, everything kind of is the same unless you style it with the utility classes. But there's a workaround for this. And that's something called the prose class. The prose class is under this Tailwind CSS typography plugin. And what it does is add a set of default styles to vanilla HTML that's under whatever element you put it in. So if we add this prose class to our main editor div, anything that we type underneath of it will be formatted in a more conventional way.

under whatever element you put it in. So if we add this prose class to our main div, anything that we type underneath of it will be formatted in a more conventional way. So let's go ahead and add it. If we go down to the installation, we'll have to include this with npm. So let's head back to our source code and open up a terminal. And then we'll have to add this plugin to our main tailwind.config.js file. Oh, we got this error unable to resolve dependency tree. This might be a use for this legacy peer-deps option, which uses an older version of peer dependencies in Node. And yeah, that worked fine. So we can get rid of that. Open up our tailwind.config.js file. And under plugins, include tailwindcss-typography. And after we've included that plugin into Tailwind, we now have to add it into the wrapper of our TipTap editor. In order to do that, if we scroll down to where we create that editor,

And after we've included that plugin into Tailwind, we now have to add it into the wrapper of our TipTap editor. In order to do that, if we scroll down to where we create that editor, we can pass in a new attribute called editorProps, which is an object. And we can use the attributes property to specify a list of classes. For that we're going to use prose, which will add in the typography for the vanilla HTML elements. And we'll also adjust the position of it a little bit too. We'll give it a margin around the top and bottom, and also center it. I'm also going to remove the outline whenever it's focused. Okay, so saving this, let's go ahead and take a look in the browser and see how it's coming together. All right, so here we have our editor. And we can see that it's now closer to the center of the main area here. And if we start typing, the text looks a little different. And let's go ahead and try things like headings.