The last section went through the process of setting up the server side of Stackpress as well as demonstrating the server side interaction with the client side. Before we begin, make sure your code generally syncs up with the project explorer below.

If you are all caught up, then you can proceed to the next section.

First thing to do is to install the UnoCSS package. Open up the package.json file and add the following package.

UnoCSS is a utility-first CSS engine that allows you to use atomic classes in your project. It is a very powerful tool that allows you to write CSS in a very efficient way and better APIs to create custom classes.

Next, let's create a unocss.config.ts file in the root of the project with the following code. This file will contain the configuration for the UnoCSS engine.

adds the Tailwind CSS v3 class name rules to the project and adds pixel, hex, rgb, theme, and desktop first rules to the project.

Next, let's configure the view engine to use the UnoCSS by adding the following code to theconfig/develop.ts file.

is an array of css files that will be computed by every view in the project. This is different from styles found in the public folder, which are static files you can add in the component per view. These static files are loaded before the client app script, and are loaded with the client app script.

is an array of plugins that will be used by the view engine. This is where you can theoretically add any vite plugins you want to use in your project.

Before we run the server, let's update the plugins/app/views/home.tsxfile to use the UnoCSS classes. The following code will add the UnoCSS classes to the component.

The class will add padding all around the component, the class will increase the font size, and the class will bold the text. weight to the component. All of these afformentioned classes are Tailwind CSS classes.

So far this project demonstrates how a pluggable project structure that can be used to build a web application with the following objectives achieved.

If your final files and project code look like the following, then...

Relax and take a break and when ready, the next tutorial will cover setting up the Stackpress toolkit with many goodies like database, authentication, sessions, roles & permissions, i18n, API, and more.