All right, let's create a simple V dev server. And I've already created a new folder with nothing in it. We starting from scratch, so let's jump right in. Okay, here's a brand new project folder. You can see there's literally nothing inside of it. And so I'm going to initialize a package.json file with npm in it and the --yes flag to answer yes to all the questions. Alright, so this scaffolded a package.json for us. Before I forget, I need to add the type of module so

Alright, so this scaffolded a package JS for us. Before I forget, I need to add the type of module so that the Tailwind Vite plugin works correctly. And like I said, we want a Vite dev server. So I'm going to npm install in the dev dependencies vite. Here we go. It's been added and you can see the dev dependency here. And now for convenience, I'm going to add a script here, dev, which is literally just going to run the vite command. Alright, next, so we have something

dev, which is literally just going to run the VT command. Alright, next, so we have something to actually display in the browser. I'm going to create a new index.html file, which we're going to use for one of our screens. And I will scaffold a doctype real quick, we can change the title to pixel. And for now the body can have an <h1> tag that says Hello vet. So like I mentioned, we can start a dev server

that says Hello vet. So like I mentioned, we can start a dev server with npm run dev and this is going to start localhost:51734 site. And on that URL you can see our magnificent website. Alright, so this only took us a few seconds and now we have a dev server that will reload the page every time we make changes, which is super handy for development purposes. And also it's going to help us support Tailwind CSS

which is super handy for development purposes. And also it's going to help us support Tailwind CSS through the V plugin. So the next thing we're going to do right now is install the feed plugin and configure it to work with this project. Alright, let's install Tailwind CSS with npm install tailwindcss and tailwindcss/v for the V plugin. Looks like we good to go. So now we need to run these tailwind plugins through vt.

Looks like we good to go. So now we need to run these tailwind plugging through vt and we need a Vite config to do so. So I'll create a vite.config.js file. And here we'll export default defineConfig. I'm going pretty fast because we wanna focus on the HTML and CSS build. So here we can have a plugins array and pass the tailwindcss plugin. And I need to call this as a function.

and pass the tailwindcss plugin. And I need to call this as a function and that's all we need to do at this point. We're ready to process the Tailwind styles. We just need to import tailwind in a CSS file. So I'll create a styles.css file, and here I can add @import 'tailwindcss'. So this now should work, but we need to go back in our index.html file and tell it that we have a link tag that points

but we need to go back in our index.html file and tell it that we have a link tag that points to styles.css and that's the entire setup to get Tailwind working. So if I restart the server with npm run dev, you can see that Tailwind is working and that's why the font size has been normalized to 16 pixels. But if I was to add a class to the h1 and say text-4xl uppercase, you best believe this is going

and say text for Excel uppercase, you best believe this is going to be uppercase and for Excel. Pretty cool. We all set up. Okay, now that we have a dev server working with Tailwind CSS, in the next lesson we're going to configure the custom colors and font families that we've looked at in the design.