Project

Goal of this project was to learn tailwindCSS and headlessUI.

For my web applications, I currently use Next.js, a React-based meta-framework that connects the frontend and backend very efficiently. With web applications, a page can be rendered on the server or on the browser (generate HTML/CSS from JavaScript). Server-side rendering has the advantage that the server can fetch data directly from the database and the resulting HTML is much smaller than the JavaScript for client-side rendering. Client-side rendering has the advantage that it can work directly with user input. Next.js renders all pages on the server per se and only renders components that require user input on the client.

So far I have used Mantine for the frontend. This package provides ready-made components, which can then be quickly and easily put together in a frontend. However, Mantine has two disadvantages: It is relatively tedious to configure the appearance, and Mantine cannot be pre-rendered on the server. That's why I tried tailwind.

Tailwind is a CSS framework in which styles are written directly into the classes of elements. Tailwind then generates the corresponding CSS from these class names, which can then be sent to the browser. Accordingly, JavaScript is no longer required for styling, and (almost) the entire homepage can be rendered on the server. As a result, almost everything works without JavaScript, and the page loads much faster than before. In addition, I have much more control over the appearance of the application.

Conclusion: Tailwind is fun and allows you to write more efficient applications. Accordingly, I will use tailwind regularly in the future